微信小プログラムアニメーション効果,小プログラムanimationアニメーション
9675 ワード
微信ウィジェットのアニメーション効果
最近ずっと小さいプログラムの開発をしていて、公式のドキュメントの中で何気なく移行アニメーションの効果を見て、私は少し興奮して、すべての開発の枠組みを使う時私はすべて最初にアニメーションと移行を研究します
暇な時に小さなdemoを書いた.
最近ずっと小さいプログラムの開発をしていて、公式のドキュメントの中で何気なく移行アニメーションの効果を見て、私は少し興奮して、すべての開発の枠組みを使う時私はすべて最初にアニメーションと移行を研究します
暇な時に小さなdemoを書いた.
<view class="wrapper">
<view class="headerImage" catchtap="imageAnimation" animation="{
{animationData}}">
<open-data type="userAvatarUrl" >open-data>
view>
<view class="headertext">
<open-data type="userNickName" class="headertext">open-data>
view>
view>
/*wxss */
.wrapper {
background: gold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500rpx;
}
.headerImage {
width: 200rpx;
height: 200rpx;
margin-bottom: 40rpx;
}
.headertext {
font-size: 40rpx;
}
//js
const app = getApp()
const computedBehavior = require('miniprogram-computed')// ,
Component({
behaviors: [computedBehavior],)// ,
data: {
//
animationData: "",
},
methods: {
imageAnimation() {
var animation = wx.createAnimation({
duration: 4000,
timingFunction: "ease",
delay: 0,
transformOrigin: "50% 50%",
})
// animation.rotate(360).step(); // 9
//animation.scale(1.5).step(); //
// animation.translate(0,200).step(); //
// animation.skew(30,50).step(); // x,y
// animation.rotate(45).scale(0.8).translate(10,10).step() //
this.setData({
animationData: animation.export(), //
})
},
},
computed: {
},
})