介绍小程序里面animation 动画的基础用法

第一步：定义需要动画的组件animation属性，用于接收动画数据 在return 中对象的形式接受数据

<view style="font-weight: 600;opacity: 1;color: red;" :animation="animationData">+1</view>

第二步：创建动画实例，调用动画实例的方法来描述动画

onShow() {var animation = uni.createAnimation({})this.animation = animation},

第三步：定义方法来触发动画

methods: {chf(){//动画实例：在外轴上位移-10px，最后状态显示，step() 来表示一组动画完成this.animation.translateY(-10).opacity(1).step({ duration:400})this.animationData = this.animation.export()//制作延时器复原动画初始状态，可以使得我们的每次点击都会触发动画效果setTimeout(function(){this.animation.translateY(0).opacity(0).step({ duration:0})this.animationData = this.animation.export()}.bind(this),500)}}

这样就通过了动画实例方法来描述动画，并把描述的对象导入到animation属性对象中，实现动画效果，具体动画参数可以看uniapp相关文档