[flutter] RichText에서 텍스트에 대한 특정 애니메이션 효과 주기

22 Dec 2023

flutter

RichText 위젯은 Flutter에서 다양한 스타일과 레이아웃을 가진 복잡한 텍스트를 표시하는 데 사용됩니다. 이 위젯을 사용하면 단일 텍스트에 여러 가지 서로 다른 스타일을 적용할 수 있습니다. 때로는 RichText 위젯에 애니메이션 효과를 적용하여 특정 텍스트를 강조하고 사용자의 관심을 끌고 싶을 수 있습니다.

여러 가지 방법으로 RichText 위젯 내의 특정 텍스트에 애니메이션 효과를 부여할 수 있습니다. 예를 들어, ‘fade in’, ‘bounce’, ‘slide in’ 등의 효과를 자연스럽게 적용할 수 있습니다.

1. 애니메이션 효과를 적용할 특정 텍스트 식별

일반적으로 특정한 텍스트에 애니메이션 효과를 줄 때, 해당 텍스트를 식별하여 특별한 스타일이나 애니메이션을 적용할 수 있습니다. 이를 위해 특정 텍스트를 식별하는 방법이 필요합니다.

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: '안녕하세요, ',
        style: TextStyle(color: Colors.black),
      ),
      TextSpan(
        text: '여기에 애니메이션 효과를 적용합니다!',
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, /* 애니메이션 스타일 추가 */),
      ),
    ],
  ),
)

이러한 방식으로 특정 텍스트에 변형을 주기 위해 해당 텍스트를 식별할 수 있습니다.

2. 애니메이션 효과 적용

특정 텍스트를 식별한 후, 애니메이션 효과를 적용합니다. 이를 위해 Flutter의 Animation 및 AnimationController를 이용하여 애니메이션을 적용할 수 있습니다.

// 애니메이션 효과를 위한 변수 및 컨트롤러 정의
AnimationController _controller;
Animation<double> _animation;

// 애니메이션 초기화
@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );
  _animation = Tween<double>(
    begin: 0.0,
    end: 1.0,
  ).animate(_controller)
    ..addListener(() {
      setState(() {});
    });
}

// 특정 텍스트에 애니메이션 효과 적용
TextSpan(
  text: '여기에 애니메이션 효과를 적용합니다!',
  style: TextStyle(
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    fontSize: 20.0 * _animation.value, // 크기에 대한 애니메이션 효과 적용
  ),
),

이 예제에서는 애니메이션 컨트롤러 및 변수를 초기화하고, 해당 애니메이션을 특정 텍스트에 적용하는 방법을 보여주고 있습니다.

이런 방식으로, RichText 위젯 내에서 특정 텍스트에 다양한 애니메이션 효과를 적용할 수 있습니다.

3. 마무리

이제 특정 텍스트에 애니메이션 효과를 적용하는 방법에 대해 알아보았습니다. RichText 위젯은 이러한 방식으로 다양한 애니메이션 효과를 적용하여 텍스트를 더욱 흥미롭게 표현할 수 있습니다.