微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo<!--wxml代码--><view class="wrapper"><!-- 微信小程序开发功能获取用户头像userAvatarUrl --><view class="headerImage"
·
微信小程序动画效果
最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡
闲来无事写了一个小demo
<!--wxml代码-->
<view class="wrapper">
<!-- 微信小程序开发功能获取用户头像userAvatarUrl -->
<view class="headerImage" catchtap="imageAnimation" animation="{{animationData}}">
<open-data type="userAvatarUrl" ></open-data>
</view>
<!-- 微信小程序开发功能获取用户昵称userNickName -->
<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: {
},
})
更多推荐
所有评论(0)