效果
點(diǎn)擊按鈕三角形按照一個(gè)三角形的路線移動(dòng)
css動(dòng)畫.gif
實(shí)現(xiàn)思路
主要通過translate這個(gè)屬性控制對(duì)應(yīng)的x軸y軸的移動(dòng)zuo biao
實(shí)現(xiàn)過程
wxml
<view class="container">
<view class='triangle {{active?"active":""}}'></view>
<button class='actionbotton' bindtap='action'>點(diǎn)擊開始動(dòng)畫</button>
</view>
css
.container {
position: relative;
}
//三角形
.triangle {
width: 0rpx;
height: 0rpx;
position: absolute;
border-left: 50rpx solid transparent;
border-top: 50rpx solid transparent;
border-right: 50rpx solid transparent;
border-bottom: 50rpx solid red;
margin-top: 300rpx;
}
.actionbotton {
position: absolute;
margin-top: 450rpx;
}
//動(dòng)畫定義
.active {
animation-name: test;//名稱
animation-duration: 3s;//時(shí)間
animation-timing-function: linear;//方式
animation-iteration-count: 5;//次數(shù)
}
@keyframes test {
0% {
transform: translate(0rpx, 0rpx);
}
20% {
transform: translate(-300rpx, -300rpx);
}
60% {
transform: translate(300rpx, -300rpx);
}
100% {
transform: translate(0rpx, 0rpx);
}
}
js
//點(diǎn)擊方法
action:function(){
this.setData({
active: !this.data.active
})
}
