摘要： 实现功能：把播放按钮动画封装成一个自定义组件，可以多处调用此组件component部分：index.wxml<view class="frame_wrap"... 实现功能：把播放按钮动画封装成一个自定义组件，可以多处调用此组件
component部分：
index.wxml
<view class="frame_wrap" style="background-image: url({{url}});--width:{{width}}rpx;--height:{{height}}rpx;--count:{{count}};--duration:{{duration}};"></view>
index.wxss
.frame_wrap {
width: var(--width);
height: var(--height);
animation: frames calc(var(--duration) * 1s) steps(var(--count)) infinite;
background-position: 0 0;
background-size: calc(var(--width) * var(--count)) var(--height);
}
@keyframes frames {
from {
background-position-x: 0;
}
to {
background-position-x: calc(var(--width) *-1 *var(--count));
}
}
index.js
Component({
properties: {
url: {
type: String,
value: ""
},
count: {
type: String,
value: 3
},
width:{
type:String,
value:360
},
height:{
type:String,
value:300
},
duration:{
type: String,
value: 0.3
},
},
data: {
},
methods: {
}
})
index.json
{
"component": true,
"usingComponents": {}
}
调用component：
index.wxml
index.js
Page({ onReady: function () { /**生命周期函数--监听页面初次渲染完成 *///获得dialog组件 this.animation= this.selectComponent("#animation"); },});
index.json
{ "usingComponents": { "animation": "/components/css-animation/index",//组件路径 }
}
此篇文章由DurkBlue发布，麻烦转载请注明来处
