// html
<view class="hearts-container" bindtap="showHeards" >
<view wx:for="{{hearts}}" wx:for-item="heart" s-key="index" class="heart-box">
<image src="{{heart.img}}" class="heart" style="{{ heart.style }}" />
</view>
</view>
// js
const app = getApp();
const rotates = [5, -5, 10, -10, 10, 0, 0, -15, 15, -20, 20];
const img = 'http://p1.meituan.net/scarlett/757d2ca1c072516f8161a77f4315e9d64616.png';
app.MoviePage({
data: {
hearts: [],
},
onLoad() {
},
showHeards(e) {
let { x, y } = e.detail;
const rankNum = rotates[Math.ceil(Math.random() * 10)] || 0;
const that = this;
let hearts = [];
if (this.data.timer) {
clearTimeout(this.data.timer);
hearts = this.data.hearts;
hearts.push({
img,
style: `top: ${y - 50}px; left: ${x - 50}px; transform: rotate(${rankNum}deg)`,
});
} else {
hearts = [{
img,
style: `top: ${y - 50}px; left: ${x - 50}px; transform: rotate(${rankNum}deg)`,
}];
}
const timer = setTimeout(() => {
that.setData({
hearts: [],
timer: null,
})
}, 4000);
this.setData({
hearts,
timer,
});
},
});
// css
.hearts-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
.heart {
width: 80px;
height: 80px;
position: absolute;
animation: heart 3s 1s forwards;
}
}
@keyframes heart {
0% {width: 90px; height: 90px;}
20% {width: 100px; height: 100px;}
50% {width: 100px; height: 100px; opacity: 0.5;}
100% {opacity: 0;}
}
小程序仿写抖音点赞动画
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...