js 시 뮬 레이 션 불꽃 효과 실현
아래 그림
먼저 원주 운동 을 묘사 하 다.
// d1
/*css*/
div{
height: 4px;
width: 4px;
background: red;
position: absolute;
}
//js
var div = document.getElementById('div'); //
document.getElementsByTagName('body')[0].appendChild(tdiv); //
var deg = 0; //
var r = 100; //
var center = [300, 300] //
var dd = Math.PI/180; // PI
setInterval(function(){
deg++;
div.style.left = center[0] + Math.cos(deg * dd) * r + 'px';
div.style.top = center[1] + Math.sin(deg * dd) * r + 'px';
},16);상술 한 절 차 를 마 친 후에 무슨 소 용이 있 습 니까?
불꽃 이 피 는 것 을 상상 해 보 세 요.많은 사각형 이 원심 에서 사방 으로 확대 하 는 운동 방식 이 라 고 할 수 있 습 니 다.
불꽃 한 다발 에 10 개의 피 어 나 는 점 이 있 는데 그것 이 바로 360/10=36 도 간격 으로 운동 궤적 이 있다 는 것 이다.
이렇게 하면 처리 하기 쉽다
// d2
var divs = []; //
var len = 10; //
var temp = 360 / len; //
for(var i = 0; i < len; i++){
var tdiv = document.createElement('div');
var tr1 = r; //
var deg = i * temp; //
var left = center[0] + Math.cos(deg * dd) * tr1
var topLen = center[1] + Math.sin(deg * dd) * tr1
tdiv.style.left = left +'px';
tdiv.style.top = topLen +'px';
tdiv.data = { //
deg : deg,
r : tr1,
left : left,
top : topLen
};
document.getElementsByTagName('body')[0].appendChild(tdiv);
divs.push(tdiv);
}
불꽃놀이 의 뜻 이 있 는 것 같 지만 불꽃놀이 의 운동 궤적 은 이렇게 정연 하지 않 고 같은 장소 에서 출발 하여 같은 장소 에서 끝난다.
이 끝 점 은 반지름 의 길이 값 이기 때문에 반지름 을 변화 시 키 기만 하면 흐 트 러 질 수 있다.
// d3
function getRanR(a,b){ // a-b
return Math.floor(Math.random()*(b-a+1)+a);
}다음 그림 을 볼 수 있 습 니 다.
어 지 러 워 보 여서 불꽃 을 전혀 피 우지 않 았 다.괜찮아,운동 시 키 면 알 아 볼 수 있어.
이것 을 움 직 이기 위해 서 는 위의 d2 의 js 코드 를 수정 해 야 합 니 다.각 노드 의 시작 위 치 를 원심 으로 합 니 다.동시에 힘 을 아 끼 기 위해 css 3 로 운동 을 합 니 다.
/*css*/
div{
height: 4px;
width: 4px;
background: red;
position: absolute;
transition: 1s all; //
}
// js
tdiv.style.left = center[0] +'px';
tdiv.style.top = center[1] +'px';
document.onclick = function () {
for(var i = 0; i < divs.length; i++){
divMove(divs[i])
}
}
function divMove(div){
var data = div.data;
div.style.left = data.left + 'px';
div.style.top = data.top + 'px';
}
이렇게 하면 간단 하고 쉬 운 불꽃놀이 효 과 를 볼 수 있다.이렇게 간단 하고 쉬 운 불꽃 놀 이 를 연속 하면 그림 1 의 효 과 를 얻 을 수 있다.
그래서 우선 이 간단 하고 쉬 운 불꽃 효과 에 대해 포장 을 해 야 한다.
애니메이션 은 조작 을 편리 하 게 하기 위해 jquery 를 도입 합 니 다.
다음은 html+css
<html>
<head>
<meta charset="utf-8">
<style>
*{
padding: 0;
margin: 0;
}
div.boom-div{
height: 4px;
width: 4px;
background: orange;
position: absolute;
border-radius: 50%;
}
#container{
width: 100%;
height: 100%;
position: relative;
}
.input-container{
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div class="input-container">
<input id="repaint" type="button" value=" ">
<input id="zero" type="button" value=" ">
<input id="save" type="button" value=" ">
</div>
<div id="container"></div>
</body>
</html>
var boom = {
init: function (center, len, container, type) {
this.len = len || 20; //
this.maxR = 100; //
this.speed = 1500; //
this.divs = []; //
this.center = center; //
this.type = type; //
this.container = container; //
this.paint();
},
getRanR: function (a, b) { //
return Math.floor(Math.random() * (b - a + 1 )+ a);
},
// ，
// ， ， ，
paint: function () {
var that = this;
var center = that.center.slice(),
len = that.len,
container = that.container,
type = that.type,
dd = Math.PI / 180,
temp = 360 / len;
for (var i= 0; i < len; i++) {
var div = document.createElement('div');
var deg = i * temp; //
var cc = []; //
var tr = that.getRanR(0, that.maxR); //
var left = 0; //
var topLen = 0; //
var xCenter = center[0],
yCenter = center[1];
if (type) { // ，
left = xCenter; // ，
topLen = yCenter; //
cc = [xCenter + Math.cos(deg * dd) * tr, yCenter + Math.sin(deg * dd) * tr];
} else {
left = xCenter + Math.cos(deg * dd) * tr;
topLen = yCenter + Math.sin(deg * dd) * tr;
cc = [xCenter, yCenter];
}
div.className = 'boom-div';
div.style.left = left + 'px';
div.style.top = topLen + 'px';
div.data = {
left: cc[0], //
top: cc[1], //
}
that.divs.push(div);
container.appendChild(div);
}
//
that.move();
},
//
move: function () {
var that = this;
var len = that.len,
container = that.container,
divLen = that.divs.length;
for (var i = 0; i < divLen; i++) {
var div = that.divs[i];
$(div).animate({
left: div.data.left,
top: div.data.top,
opacity: 0,
}, that.speed, "linear", function() {
//
this.parentNode.removeChild(this);
});
}
}
}
var container = $('#container')[0];
var arr = []; //
var iCount = -1;
$(container).on('mousedown', function(e) {
iCount++;
e = e || window.event;
boom.init([e.clientX, e.clientY], 20,container, 1)
arr[iCount] = []; // ，
$(container).on('mousemove', function(e) {
e = e || window.event;
boom.init([e.clientX, e.clientY], 20, container, 1)
arr[iCount].push([e.clientX, e.clientY]) // ，
})
$(container).on('mouseup', function() {
$(container).off('mousemove')
})
});
//
$('#repaint').click(function() {
// console.log(arr)
if( !arr.length ){
return;
}
var tempArr= [];
// ，
for(var i = 0; i < arr.length; i++){
for(var j = 0; j< arr[i].length; j++){
tempArr.push(arr[i][j])
}
}
var count = 0;
var timmer = setInterval(function(){
if( ++ count >= tempArr.length){
clearInterval(timmer)
}
boom.init(tempArr[count],20,container,1)
},16)
});
$('#zero').click(function(){
iCount=-1;
arr=[]
});더 많은 JavaScript 하 이 라이트 효 과 를 여러분 에 게 공유 합 니 다:
자 바스 크 립 트 메뉴
javascript QQ 특수효과 집합
자 바스 크 립 트 시계 필터 집합
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
