关于小程序的animation使用方法，在页面中使用可以参考小程序的api文档。
在组件中如何创建和使用呢，首先关于组件和页面的生命周期中，小程序页面控制组件的if要写在页面组件上防止提前创建组件
然后在组件中参考小程序组件和页面的生命周期，created和attached都是在渲染前的
因此组件的动画实例方法应该放在ready生命周期中，下面为组件方法
js
lifetimes:{ attached: function () { // 在组件实例进入页面节点树时执行 // this.ani = wx.createAnimation() }, ready:function(){ this.start() } },
properties: { showBind:Boolean, // 展示弹框 },
data: { ani:{} },
methods: { start(){ var ani = wx.createAnimation() ani.opacity(1).step({duration: 1000}) this.setData({ ani:ani.export() }) console.log(this.data.ani) }, }
html
<root-portal wx:if="{{showBind}}"> <view class="box"> <view class="content" animation='{{ani}}' catchtap="start"> 111 </view> </view> </root-portal>
css
.box { position: absolute; z-index: 2; top: 50%; left: 50%; height: 500rpx; width: 50%; transform: translate(-50%, -50%); }
.content { position: relative; opacity: 0; width: 100%; height: 100%; background-color: red; }