兩大微信小程序實現(xiàn)彈幕效果方法,手持彈幕微信怎么搞的

手持彈幕小程序

　　手持彈幕小程序-是一個文字滾動工具，適用于尋人，接機，粉絲應援。

8.0分

　　微信對于大家來說都不陌生，不過里面有好多小功能相信朋友們就不一定都知道。

　　比如說：彩字彈幕。

　　方法/步驟

　　1打開微信，點擊【發(fā)現(xiàn)】

　　2找到并點擊進入【小程序】

　　3點擊右上角的“小放大鏡”圖標，輸入“手持彈幕”。

　　4選擇點擊“手持彈幕”，生成“彈幕”頁面。

　　5按照個人喜好對“彈幕”進行設置。(輸入您想表達文字)

　　6然后選擇要發(fā)送“彩字彈幕”的朋友。

　　7點擊“發(fā)送”(您的朋友點擊之后就會看到有意思的字幕顯示)。

　　微信小程序實現(xiàn)彈幕效果

　　主要原理是使用的CSS3的動畫效果。

　　wxml代碼：

　　{{item.text}}

　　1234567891011121314

　　wxss：

　　/**index.wxss**/

　　.button{

　　position: absolute;

　　bottom: 0;

　　width: 100%;

　　}

　　.aon{

　　position: absolute;

　　white-space:nowrap;/* 防止向下?lián)Q行*/

　　}

　　.doommview{

　　z-index: 3;

　　height: 80%;

　　width: 100%;

　　position: absolute;

　　}

　　/**定義從右邊向左邊的移動的動畫**/

　　@keyframes first{

　　from{left: 100%; }

　　to{left: -100%;}

　　}123456789101112131415161718192021

　　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)//定時器動畫完成后執(zhí)行。

　　}

　　}

　　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('')

　　} 更多關注hi小程序。