效果
点击按钮三角形按照一个三角形的路线移动
css动画.gif
实现思路
主要通过translate这个属性控制对应的x轴y轴的移动zuo biao
实现过程
wxml
<view class="container">
<view class='triangle {{active?"active":""}}'></view>
<button class='actionbotton' bindtap='action'>点击开始动画</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;
}
//动画定义
.active {
animation-name: test;//名称
animation-duration: 3s;//时间
animation-timing-function: linear;//方式
animation-iteration-count: 5;//次数
}
@keyframes test {
0% {
transform: translate(0rpx, 0rpx);
}
20% {
transform: translate(-300rpx, -300rpx);
}
60% {
transform: translate(300rpx, -300rpx);
}
100% {
transform: translate(0rpx, 0rpx);
}
}
js
//点击方法
action:function(){
this.setData({
active: !this.data.active
})
}
