집 > 기사 > 웹 프론트엔드 > CSS3 탄막 구현의 자세한 예

CSS3 탄막 구현의 자세한 예

小云云원래의: 2018-05-15 14:21:042678검색

프로젝트는 Barrage를 구현해야 합니다. 온라인에서 다양한 방법을 상담해 본 결과, iPhone 6 및 Redmi 4에서 테스트했을 때 Transform+Transition의 효과가 가장 좋은 것으로 나타났습니다. jquery의 애니메이션 애니메이션을 사용하는 모바일 장치에는 명백한 지연이 있습니다. 이번 글에서는 주로 barrage를 구현하기 위한 CSS3의 샘플 코드를 소개하고 있습니다. 편집자는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 먼저 포격 지역을 만듭니다

<p class="barrage">
<p class="mask">
<!--//弹幕内容-->
</p>
</p>

<input type="text" ng-model="data.comment"/>
<button ng-click="addDanmu()">说两句</button >

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:&#39;&#39;};
$scope.danmuCount = 5; //最大弹幕行数
$scope.danmus = [&#39;1545466666还是&#39;,&#39;9777777&#39;,&#39;哈哈哈哈哈&#39;,&#39;对企业读完后环球网好齐齐哈&#39;,&#39;42115我我我5&#39;,&#39;556噢噢噢噢45&#39;,&#39;54哦&#39;,&#39;54545646&#39;,&#39;666但近段时间66&#39;,&#39;56565&#39;,&#39;454465465565&#39;, &#39;1545466666还是&#39;,&#39;9777777&#39;,&#39;哈哈哈哈哈&#39;,&#39;对企业读完后环球网好齐齐哈&#39;,&#39;42115我我我5&#39;,&#39;556噢噢噢噢45&#39;,&#39;54哦&#39;,&#39;54545646&#39;,&#39;666但近段时间66&#39;,&#39;56565&#39;,&#39;454465465565&#39;]; //弹幕数据源

//创建弹幕区域
$scope.createDanmuContent = function () {
var height = 1 / $scope.danmuCount * 100 + &#39;%&#39;;
for (var i = 0; i < $scope.danmuCount; i++) {
var item = &#39;<p style="width: 100%; height: &#39;+height+&#39;"></p>&#39;;
$(&#39;.mask&#39;).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 = $("<p style=&#39;margin: 0;position: absolute;opacity:1;display:table;left: "+_left + &#39;px&#39;+&#39;;color:&#39;+$scope.getRandomColor()+"&#39;>"+$scope.danmus[i]+"</p>");
$(".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(&#39;p&#39;).length == 0 ? true : false;
};
//获取随机颜色
$scope.getRandomColor = function () {
return &#39;#&#39; + (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({
&#39;transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-webkit-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-webkit-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-moz-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-moz-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-ms-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-ms-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;
});
//当动画执行完毕后，将弹幕移到原处，更换弹幕文字，重新开始执行动画，相当于对原本弹幕的复用
$timeout(function () {
//判断弹幕池是否还有内容，如果没有则移除弹幕
if ($scope.danmus.length > 0) {
el.css({
&#39;transform&#39;:&#39;translateX(0px)&#39;,
&#39;transition&#39;:&#39;all 0ms linear&#39;,
&#39;-webkit-transform&#39;:&#39;translateX(0px)&#39;,
&#39;-webkit-transition&#39;:&#39;all 0ms linear&#39;,
&#39;-moz-transform&#39;:&#39;translateX(0px)&#39;,
&#39;-moz-transition&#39;:&#39;all 0ms linear&#39;,
&#39;-ms-transform&#39;:&#39;translateX(0px)&#39;,
&#39;-ms-transition&#39;:&#39;all 0ms linear&#39;
});
$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를 기반으로 사격 라인 수를 생성한 다음 각 라인에 사격을 추가하고 해당 애니메이션을 추가합니다. 애니메이션이 완료되면 포격을 원래 위치로 되돌리고 포격 내용을 교체한 후 애니메이션을 다시 실행하여 포격이 겹치는 것을 방지합니다. 각 사격 애니메이션의 실행 시간은 사격의 길이에 따라 결정됩니다.

개인적인 경험이니, 다들 단점을 지적해주셨으면 좋겠습니다. 위 코드는angularjs를 사용하지만 로직은 동일합니다

CSS3 탄막 구현의 자세한 예

관련 기사