一、Animation wx.createAnimation(Object object)
作用:创建一个动画实例animation 。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。(之后组件就会按照你约定的运动模式来进行)此方法最后返回一个Animation类型的对象;
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
duration | number | 400 | 否 | 动画持续时间,单位 ms |
timingFunction | string | 'linear' | 否 | 动画的效果(此属性一般要修改) |
delay | number | 0 | 否 | 动画延迟时间,单位 ms |
transformOrigin | string | '50% 50% 0' | 否 | 一般用于旋转效果 |
timingFunction 的合法值
值 | 说明 |
---|---|
'linear' | 动画从头到尾的速度是相同的,用于设置动画的模式(常用) |
'ease' | 动画以低速开始,然后加快,在结束前变慢 |
'ease-in' | 动画以低速开始 |
'ease-in-out' | 动画以低速开始和结束 |
'ease-out' | 动画以低速结束 |
'step-start' | 动画第一帧就跳至结束状态直到结束 |
'step-end' | 动画一直保持开始状态,最后一帧跳到结束状态 |
动画对象的常用方法(Function):
一般控制动画的方式有旋转(rotate)、平移(transform)、放缩(scale)三种;
在使用这些方法之前我们需要创建一个动画对象,创建方式如下:(核心就是创建动画实例)
animation=wx.createAnimation({参数列表})
之后我们可以通过此动画对象来调用对应的动态效果,下面介绍几个常用的方法
animation.scale("number");//等比例放大或缩小number倍数
animation.rotateY("number");//沿着Y轴旋转number角度【-180,180】
animation.transformX("number");//沿着X轴平移number距离
animation.opacity("number");//设置组件的透明度【0,1】
animation.backgroundColor("string");//设置组件的背景颜色
animation.step();//表示一组动画一步一步的执行,上一步结束下一步才开始
animation.width("number")
animation.height("number")//设置组件的宽高
(注:上面方法的X,Y,Z为坐标轴可以相互替换)
实战:旋转图形+放缩+位移:(上述方法的综合应用)
//WXML视图界面/* pages/index/index.wxml */
<view wx:if="{{hidden}}" style="position:relative;left:182rpx;width:400rpx;height:400rpx;" animation="{{animatiomMain2}}">
<text>on the way</text>
<view animation="{{animatiomMain1}}"></view>
<view animation="{{animatiomMain1}}" class="show1"></view>
<view animation="{{animatiomMain1}}" class="show2"></view>
<view animation="{{animatiomMain1}}" class="show3"></view>
<view animation="{{animatiomMain1}}" class="show4"></view>
<view animation="{{animatiomMain1}}" class="show5"></view>
<view animation="{{animatiomMain1}}" class="show6"></view>
</view>
/* pages/index/index.wxss */
page{
text-align: center;
}
text{
position: relative;
top:182rpx;
font-size: large;
}
view{
position: absolute;
left: 112rpx;
width: 180rpx;
height: 180rpx;
top:20rpx;
text-align: center;
vertical-align: -webkit-baseline-middle;
margin-top:100rpx;
border: 2rpx solid black;
}
.show1{
transform: rotate(30deg);
border: 2rpx solid black;
}
.show2{
transform: rotate(60deg);
border: 2rpx solid black;
}
.show3{
transform: rotate(90deg);
border: 2rpx solid black;
}
.show4{
transform: rotate(120deg);
border: 2rpx solid black;
}
.show5{
transform: rotate(150deg);
border: 2rpx solid black;
}
.show6{
transform: rotate(180deg);
border: 2rpx solid black;
}
button{
top:600rpx;
}
// pages/index/index.js
Page({
data: {
animatiomMain1: "none",
hidden:false,
animatiomMain2:"none"
},
onShow: function() {
this.setData({hidden:true})
var obj = wx.createAnimation({
duration: 5000,
delay:0
}) //创建一个动画对象
this.animation = obj
var next = true;
setInterval(function() {
if (next) {
this.animation.rotate(180).scale(1.8).step()
next = !next
} else {
this.animation.rotate(-180).scale(0).step()
next = !next
}
this.setData({
animatiomMain1: obj.export(), //重新渲染动画对象
})
}.bind(this), 5400)
var obj2 = wx.createAnimation({
duration: 5000,
delay: 0
}) //创建一个动画对象
this.animation2 = obj2
setInterval(function () {
if (next) {
this.animation2.translateY(20).scale(0.8).step()
} else {
this.animation2.translateY(-10).scale(0.6).step()
}
this.setData({
animatiomMain2: obj2.export(), //重新渲染动画对象
})
}.bind(this), 5400)
}
})
运行结果:
除了上述操作,也可以通过此api实现卡牌翻转的功能,相比传统HTML+CSS的操作更为简单和易于理解;
wx.stopPullDownRefresh(Object object)和wx.startPullDownRefresh(Object object)为微信的两种刷新模式;
(注:两者的参数一致,如下表所示,一般使用前两种参数,刷新可与this.setData连用,起到重新数据绑定的作用,且这两者一般在一起使用,但在使用之前需要将json中的"enablePullDownRefresh":设置为true)
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
// pages/index/index.wxml
<view>刷新{{info}}次</view>
// pages/index/index.js
Page({
data: {
info:1
},
onLoad:function(){
wx.startPullDownRefresh()
},
onPullDownRefresh() {
var i=this.data.info+1
this.setData({
info:i
})
wx.stopPullDownRefresh()
}
}) //下拉刷新的简单使用,每一次刷新都会提示刷新次数,一定要把json中的刷新设置为true
wx.setBackgroundTextStyle(Object object):用于设定背景字体风格
wx.setBackgroundColor(Object object) :用于设定背景颜色(这两者一般不会使用,背景色一般以白色风格为主)