用php做弹幕效果,用CSS3实现弹幕效果

这次给大家带来用CSS3实现弹幕效果，用CSS3实现弹幕效果的注意事项有哪些，下面就是实战案例，一起来看一下。

最近需要项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。

1.首先创建弹幕区域

说两句

2.css.webPage .barrage{width:100%;height:22%;position: absolute; bottom: 50px; background-color: transparent;pointer-events: none;}

.webPage .barrage .mask{width:100%;height:100%;background:transparent;z-index:100;}

注：以上html,css根据自己需求来即可

3.js$scope.data = {comment:''};

$scope.danmuCount = 5; //最大弹幕行数

$scope.danmus = ['1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565', '1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565']; //弹幕数据源

//创建弹幕区域

$scope.createDanmuContent = function () {

var height = 1 / $scope.danmuCount * 100 + '%';

for (var i = 0; i < $scope.danmuCount; i++) {

var item = '

$('.mask').append(item);

}

$scope.createDanmu ();

};

//开始弹幕绘制

$scope.createDanmu = function () {

var maxCount = 0;

if ($scope.danmus.length > $scope.danmuCount) {

maxCount = $scope.danmuCount;

} else {

maxCount = $scope.danmus.length;

}

var _left = window.screen.width;

for (var i = 0; i < maxCount; i++) {

var _lable = $("

"+$scope.danmus[i]+"

");

$(".mask p").each(function () {

//检测该区域是否绘制了弹幕

if ($scope.checkDanmu($(this))) {

$(this).append(_lable);

$scope.moveArray(i);

i--;

return false;

}

});

}

$scope.init_barrage();

};

//将数组第一位放到最后一位,(因弹幕池内容太少，所以没删除已显示的弹幕)

$scope.moveArray = function (i) {

var temp = $scope.danmus[i];

$scope.danmus.splice(i,1);

$scope.danmus.push(temp);

}

//判断content区域有没有弹幕

$scope.checkDanmu = function (el) {

return el.find('p').length == 0 ? true : false;

};

//获取随机颜色

$scope.getRandomColor = function () {

return '#' + (function(h){

return new Array(7 - h.length).join("0") + h

})((Math.random() * 0x1000000 << 0).toString(16))

};

//初始化弹幕参数

$scope.init_barrage = function () {

$(".mask p p").show().each(function() {

var _moveLeft = window.screen.width+$(this).width();

var time = 100000 / $(this).width() + 5000;//弹幕滑动时间

$scope.addCssAnimate($(this),_moveLeft,time);

});

};

//添加弹幕动画

$scope.addCssAnimate = function (el,_moveLeft,time) {

el.css({

'transform':'translateX('+-_moveLeft+'px)',

'transition':'all '+time+'ms'+ ' linear',

'-webkit-transform':'translateX('+-_moveLeft+'px)',

'-webkit-transition':'all '+time+'ms'+ ' linear',

'-moz-transform':'translateX('+-_moveLeft+'px)',

'-moz-transition':'all '+time+'ms'+ ' linear',

'-ms-transform':'translateX('+-_moveLeft+'px)',

'-ms-transition':'all '+time+'ms'+ ' linear'

});

//当动画执行完毕后，将弹幕移到原处，更换弹幕文字，重新开始执行动画，相当于对原本弹幕的复用

$timeout(function () {

//判断弹幕池是否还有内容，如果没有则移除弹幕

if ($scope.danmus.length > 0) {

el.css({

'transform':'translateX(0px)',

'transition':'all 0ms linear',

'-webkit-transform':'translateX(0px)',

'-webkit-transition':'all 0ms linear',

'-moz-transform':'translateX(0px)',

'-moz-transition':'all 0ms linear',

'-ms-transform':'translateX(0px)',

'-ms-transition':'all 0ms linear'

});

$scope.resetAnimate(el);

} else {

el.remove();

}

},time);

};

//更换弹幕内容，重新开始弹幕动画

$scope.resetAnimate = function (el) {

el.html($scope.danmus[0]);

$scope.moveArray(0);

var _moveLeft = el.width() + screen.width;

var time = 100000 / el.width() + 5000;

$scope.addCssAnimate(el,_moveLeft,time);

};

//评论，添加弹幕

$scope.addDanmu = function () {

var text = $scope.data.comment;

if(text == ""){

return;

}

$scope.danmus.unshift(text);

};

$scope.createDanmuContent();

至此，功能基本实现了。要关闭弹幕只需移除弹幕的区域，文中就没有写了。

逻辑：首先根据$scope.danmuCount来创建弹幕的行数，然后在每行里面添加弹幕，并添加相应的动画。当一个动画执行完毕后，将弹幕移回原处，更换弹幕内容，重新执行动画，这样避免了弹幕重叠。每条弹幕动画执行时间是根据弹幕长度决定的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：