微信小程序实现弹幕效果
2017-04-26 16:29
489 查看
微信小程序实现弹幕效果
折腾了一周的微信小程序,一直在寻找弹幕效果,但是由于微信小程序的MVVM架构,很多HTML代码都无法运行,只有自己折腾一个出来。效果:
主要原理是使用的CSS3的动画效果。
wxml代码:
<!--index.wxml--> <view class="doommview"> <block wx:for="{{doommData}}" wx:key="id"> <text wx:if="{{item.display}}" class="aon" style="animation: first {{item.time}}s linear forwards;top:{{item.top}}%;color:{{item.color}};"> {{item.text}} </text> </block> </view> <view class="button"> <button bindtap="bindbt">弹一个小苹果</button> </view>
wxss:
/**index.wxss**/ .button{ position: absolute; bottom: 0; width: 100%; } .aon{ position: absolute; white-space:nowrap;/* 防止向下换行*/ } .doommview{ z-index: 3; height: 80%; width: 100%; position: absolute; } /**定义从右边向左边的移动的动画**/ @keyframes first{ from{left: 100%; } to{left: -100%;} }
js:
//index.js var page = undefined; Page({ onLoad: function () { page = this; }, bindbt:function(){ doommList.push(new Doomm("你是我的小苹果",Math.ceil(Math.random()*100),Math.ceil(Math.random()*10),getRandomColor())); this.setData({ doommData : doommList }) }, data: { doommData:[] } }) var doommList=[]; var i=0;//用做唯一的wx:key class Doomm{ constructor(text,top,time,color){ this.text = text+i; this.top = top; this.time = time; this.color = color; this.display = true; let that = this; this.id = i++; setTimeout(function(){ doommList.splice(doommList.indexOf(that),1);//动画完成,从列表中移除这项 page.setData({ doommData : doommList }) },this.time*1000)//定时器动画完成后执行。 } } function getRandomColor() { let rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') }
这样就可以实现一个弹幕效果,程序还有很多问题,还请各位看官见谅并指正。
项目地址:https://github.com/wjq1028/doomm
相关文章推荐
- 微信小程序 实现tabs选项卡效果实例代码
- 微信小程序 tabs选项卡效果的实现
- 微信小程序实现“鲜肉APP”首页效果
- 微信小程序实现高亮效果
- [置顶] 微信小程序实现tabs选项卡效果简单代码实例
- 微信小程序 vidao实现视频播放和弹幕的功能
- 微信小程序实例:实现tabs选项卡效果
- 微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
- 微信小程序开发常用技巧(7)——实现一个类似于Android toast效果动画
- 微信小程序实现跟随菜单效果和循环嵌套加载数据
- (四)微信小程序之实现轮番效果(swiper)
- 微信小程序实现滑动删除效果
- 微信小程序左滑删除效果的实现代码
- 微信小程序实现顶部普通选项卡效果(非swiper)
- 微信小程序例子——使用progress组件实现读取进度效果
- 微信小程序左滑删除效果的实现
- 微信小程序实现tab和swiper切换结合效果
- 微信小程序实现登录页云层漂浮的动画效果
- 微信小程序实现tab切换效果
- 微信小程序实现轮播图效果