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>

觸發函數

點擊矩形之后我們判斷布爾值是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{
    width: 100rpx;
    height: 60rpx;
    background-color: #007AFF;
    margin: 100rpx auto;
​
  }
</style>