小程序设置动画效果

Posted 2023-04-30

参考技术A         小程序和html页面有点不同，主要是使用js来实现动画效果，因为小程序自身有提供一种方式：wx.createAnimation(OBJECT)，它创建一个动画实例 animation ，通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性，step()来停止动画，step() 表示一组动画完成。

我们主要用wx:createAnimation()来设置一些参数，例如持续时间、延时、加载方式等，用export()来开启动画，在页面上调用animation=”动画名称”。具体步骤：

1）创建动画对象并设置有效参数==>wx:createAnimation(参数：有效值)

2）创建一组动画，调用step()来表示一组动画的完成==>动画对象.动画效果.step()

3）在data中设置一个对象vip_animal(自己随意命名)，用该对象开启动画==>this.setData(vip_animal: animation.export())

4）在页面上调用动画对象==> animation="vip_animal"

例子：淡入淡出动画效果（当淡入动画生效后1.5s，淡出动画开始生效）

在wxml上调用animation="vip_animal"来显示

如果需要设置循环效果。我们可以设置：（setAnimation为）

另一种方式：

在wxml上调用style="style_img"来显示

应用程序启动后如何为小部件设置动画

【中文标题】应用程序启动后如何为小部件设置动画

【英文标题】：How to animate widget after the app is launched

【发布时间】：2019-05-09 06:08:32

【问题描述】：

我想在启动应用程序后（在小部件树被渲染并显示在屏幕上之后）为我的容器高度设置动画。例如，将高度从 86 设置为 210。

我尝试过的：

class MyAppState extends State<HomePage> with TickerProviderStateMixin 

  double appBarHeight = 86.0;

  @override
  void initState() 
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => animate());
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: <Widget>[
          AnimatedContainer(
            curve: Curves.fastOutSlowIn,
            child: Container(
              color: Colors.red,
            ),
            height: appBarHeight,
            duration: Duration(milliseconds: 400),
          ),
          Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: EdgeInsets.only(right: 16.0, bottom: 16.0),
                child: FloatingActionButton(
                  child: Icon(Icons.brush),
                  onPressed: () 
                    animate();
                  ,
                ),
              ))
        ],
      ),
    );
  

  void animate()
    setState(() 
      if (appBarHeight == 210.0) appBarHeight = 86.0;
      else appBarHeight = 210.0;
    );
  

但它不起作用，因为小部件在出现在屏幕上之前是动画的。我在应用启动时看到白屏，然后我的小部件以最终高度出现在屏幕上。

在 Android 中，我们可以使用 addOnLayoutChangeListener()。

Flatter 中有 addOnLayoutChangeListener() 的类似物吗？

【问题讨论】：

我怀疑flutter中是否有这种方法。这是StatefulWidget - flutterbyexample.com/stateful-widget-lifecycle 的生命周期方法。但我没有看到你可以使用其中的哪些

如果你增加动画的持续时间，它会起作用吗？持续时间（毫秒：400）

您的代码没有明显的问题，400 毫秒的持续时间太小，无法注意到，增加您的持续时间它会正常工作。我测试过。

@diegoveloper 它适用于更长的持续时间，但我认为这不是一个解决方案。我应该增加多少持续时间？持续时间=应用程序启动时+动画持续时间？但对于不同的电话来说，这是一个不同的时间。我想在小部件布局后以任何持续时间开始动画。

如果我在我的 iOS 模拟器上运行你的示例，它就可以正常工作，动画会出现在开头

【参考方案1】：

正如你提到的，看起来这是 Android 上的问题，我在 iOS 上进行了测试，动画在开始时运行。

你可以试试这个解决方法：

  _startAnimation(_) async 
      await Future.delayed(Duration(milliseconds: 200));
      animate();
    

    @override
    void initState() 
      super.initState();
      WidgetsBinding.instance.addPostFrameCallback(_startAnimation);