uniapp小程序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>

触发函数

点击矩形之后我们判断布尔值是flase还是true来执行相对于动画效果

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()
                }
            },

总结和注意

1.动画效果需创建和绑定

2.动画效果就和一个布尔值来操控

3.animation对象的方法列表可以阅读：（https://uniapp.dcloud.io/api/ui/animation?id=createanimation）

4.animation对象中的height，width之类是px为单位我们在输入时候需要在upx像素之间换算（2upx = 1px）

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{
     100rpx;
    height: 60rpx;
    background-color: #007AFF;
    margin: 100rpx auto;
​
  }
</style>