這幾天在做小程序時遇到了一些問題：想要實現一個答對題目+5秒、答錯題目-5秒的提示動畫效果，但是關于微信小程序的animation自定義動畫自己沒有系統的學習過

做動畫需要我們將一個復雜的動作過程，拆解為一步一步的小節過程

微信中已經為我們寫好了端口我們只需要實例化一個動畫實例（實例代碼如下）

先了解基礎部分：

在看代碼之前要先有個下面的基礎了解

1）wx.createAnimation(object) 微信小程序實例化一個動畫效果

2）export( ) 這個方法是導出動畫數據（傳遞給animation屬性）

3）step( )?來表示一組動畫完成

?微信官方文檔地址

?微信官網主要屬性設置：

這里主要說下timingFunction和transformOrigin

• timingFunction 設置動畫效果

  • linear 默認為linear 動畫一直較為均勻
  • ease 開始時緩慢中間加速到快結束時減速
  • ease-in 開始的時候緩慢
  • ease-in-out 開始和結束時減速
  • ease-out 結束時減速
  • step-start 動畫一開始就跳到 100% 直到動畫持續時間結束 一閃而過
  • step-end 保持 0% 的樣式直到動畫持續時間結束 一閃而過

• transformOrigin 設置動畫的基點 默認50% 50% 0

  • left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%
  • top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%

動畫組及動畫方法：

樣式：?

?旋轉：

?縮放：

偏移：

傾斜：

矩形變形：

官方是這樣介紹的：

創建一個動畫實例?animation。調用實例的方法來描述動畫。最后通過動畫實例的 export 方法導出動畫數據傳遞給組件的 animation 屬性。

使用步驟：

　　1）創建一個animation實例

　　2) 調用實例化的方法描述動畫

　　3）最后通過動畫實例的export( )方法導出動畫數據傳遞給{{animation}}

?調用動畫操作方法后要調用 step( ) 來表示一組動畫完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數用于指定當前組動畫的屬性

下面是代碼實例：

?????????HTML

<view class="header-text {{currentTopicIsCorrect != 0 ? currentTopicIsCorrect == 1 ? 'header-text-yes' : 'header-text-no' : ''}}" animation="{{animationData}}">{{currentTopicIsCorrect == 1 ?'+5' : '-5'}}</view>

JS　　

Page({/*** 頁面的初始數據*/data: {currentTopicIsCorrect: 0, //當前題是否答對animationData: null, //},//動畫效果--淡入淡出ani_smallbigOut: function (correct) {let that = this//實例化一個animationvar animation = wx.createAnimation({duration: 450,// 動畫持續時間，單位ms，默認值 400/** * linear 動畫一直較為均勻* ease 從勻速到加速在到勻速* ease-in 緩慢到勻速* ease-in-out 從緩慢到勻速再到緩慢* step-start 動畫一開始就跳到 100% 直到動畫持續時間結束 一閃而過* step-end 保持 0% 的樣式直到動畫持續時間結束 一閃而過*/timingFunction: 'ease',})this.animation = animationanimation.scale(3, 3).opacity(1).step()animation.scale(0).step()that.setData({animationData: animation.export(),})that.setData({currentTopicIsCorrect: 0,})setTimeout(function () {that.setData({flag: false,})}, 1500)},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {this.ani_smallbigOut(1)},})

?wxss

.header-text {margin-top: 12%;margin-left: 2%;opacity: 0; }.header-text-yes {color: green; }.header-text-no {color: red; }

總結

以上是生活随笔為你收集整理的微信小程序animation有趣的自定义动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。