容器内的文本翻译动画 - 颤动

Question

在文本翻译动画期间，我只想显示容器内的文本部分。红色容器外的文本部分不显示。我怎样才能完成容器内文本小部件的翻译动画。帮助更新以下代码：

import 'package:flutter/material.dart';
import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';
import 'package:supercharged/supercharged.dart';

class Home2 extends StatefulWidget {
  const Home2({Key? key}) : super(key: key);

  @override
  _Home2State createState() => _Home2State();
}

class _Home2State extends State<Home2> with TickerProviderStateMixin {
  late AnimationController animationController;
  late SequenceAnimation sequenceAnimation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animationController = AnimationController(vsync: this);
    sequenceAnimation = SequenceAnimationBuilder()
        .addAnimatable(
            animatable: Tween<double>(begin: -200, end: 0),
            curve: Curves.easeIn,
            from: 100.milliseconds,
            to: 5000.milliseconds,
            tag: "move")
        .animate(animationController);
    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          width: 500,
          height: 200,
          color: Colors.red,
          margin: EdgeInsets.all(50),
          child: AnimatedBuilder(
            animation: animationController,
            builder: (BuildContext context, Widget? child) {
              return Transform.translate(
                offset: Offset(sequenceAnimation["move"].value,0),
                child: Text(
                  "Welcome",
                  style: TextStyle(fontSize: 40, color: Colors.black),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Answer 1

用任何剪辑小部件包裹 Transform 小部件。

builder: (BuildContext context, Widget? child) {
  return ClipRect(
      child: Transform.translate(
    offset: Offset(sequenceAnimation["move"].value, 0),
    child: Text(
      "Welcome",
      style: TextStyle(fontSize: 40, color: Colors.black),
    ),
  ));
},

容器内的文本翻译动画 - 颤动

text Translate Animation inside container - flutter

dart

flutter

flutter-animation