js 시 뮬 레이 션 불꽃 효과 실현

8570 단어 js불꽃놀이
본 논문 의 사례 는 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);
}
for 순환 의 tr1 을 getRanR(0,200)로 변경 합 니 다.
다음 그림 을 볼 수 있 습 니 다. 

어 지 러 워 보 여서 불꽃 을 전혀 피 우지 않 았 다.괜찮아,운동 시 키 면 알 아 볼 수 있어.
이것 을 움 직 이기 위해 서 는 위의 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';
운동 궤적 은 d2 에서 알 수 있 듯 이 모두 노드 에 저장 되 어 있다.divs 로 각 노드 를 얻 을 수 있 습 니 다.그래서 divs 만 조작 하면 돼 요.

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>
JS 부분

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 특수효과 집합
자 바스 크 립 트 시계 필터 집합
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기