uni-app小程序uni.createAnimation动画效果快速上手教程

这个世界上很多人在扮演余春娇，也有很多人是张志明，只是没有他们的结局

在实现某个功能的时候，因为基础不够只能拆分2个步骤来学习，第一个学习uni-app小程序uni.createAnimation动画效果，第二个在思考在这基础上实现某个功能，于是…..

写了3小时，出了3个bug

建立动画

建立动画有2个方式，为了学习就简单点：

1.直接在点击的行数中去建立（如果一个界面只有一个动画那就随意）；

2.onShow函数周期里面事先建立一个动画（推举）

// 生命周期,页面打开提前渲染 onShow: function(){ // 初始化一个动画 var animation = uni.createAnimation({ // 动画时间 duration: 1000, // 动画速度 timingFunction: 'linear', }) // 存在return字段中 this.animation = animation },

timingFunction有效值

设置字段

字段里面我们需要存2个东西，一个是我们建立好的animation，另外一个触发动画的开关，例如我们开灯的感觉需要一个开关控制

 animationData: {}, open: false

绑定动画

view画一个矩形，随后绑定我们的animation动画和一个点击函数

<view class="op" :animation="animationData" @tap="openTap()"></view>

触发函数

openTap() { console.log(this.open) if (this.open == false ) { this.open = true; // 定义动画内容 this.animation.height(100).step(), // 导出动画数据传递给data层 this.animationData = this.animation.export() } else { this.open = false; this.animation.height(30).step() this.animationData = this.animation.export() } },

5.必要存在动画传递发给data层

this.animationData = this.animation.export()

案例代码

<template> <view class="op" :animation="animationData" @tap="openTap()"></view> </template> ​ <script> export default{ data() { return{ animationData: {}, open: false } }, // 生命周期,页面打开提前渲染 onShow: function(){ // 初始化一个动画 var animation = uni.createAnimation({ // 动画时间 duration: 1000, // 动画速度 timingFunction: 'linear', }) // 存在return字段中 this.animation = animation }, methods:{ openTap() { console.log(this.open) if (this.open == false ) { this.open = true; // 定义动画内容 this.animation.height(100).step(), // 导出动画数据传递给data层 this.animationData = this.animation.export() } else { this.open = false; this.animation.height(30).step() this.animationData = this.animation.export() } }, ​ } } </script> <style> .op{ width: 100rpx; height: 60rpx; background-color: #007AFF; margin: 100rpx auto; ​ } </style>