整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果图
各位条子，大家下午好！
今天给大家带来的是 逼真花瓣飘落前端特效源码！
大家可以按照自己的意愿进行修改！
有想要文件版源码的朋友，可以到我的HTML学习交流 581549454 ！里面都是做前端开发的，拒绝卖课和广告！纯学习交流，每天会上传一些优秀的作品和源码，欢迎初学者和大神们。
好了，废话不多说，上源码
(function (lib, img, cjs) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties={
width: 1920,
height: 885,
fps: 24,
color: "#FFFFFF",
manifest: [
{src:"images/florwe1.png", id:"florwe1"},
{src:"images/florwe10.png", id:"florwe10"},
{src:"images/florwe11.png", id:"florwe11"},
{src:"images/florwe12.png", id:"florwe12"},
{src:"images/florwe13.png", id:"florwe13"},
{src:"images/florwe14.png", id:"florwe14"},
{src:"images/florwe15.png", id:"florwe15"},
{src:"images/florwe16.png", id:"florwe16"},
{src:"images/florwe17.png", id:"florwe17"},
{src:"images/florwe18.png", id:"florwe18"},
{src:"images/florwe3.png", id:"florwe3"},
{src:"images/florwe4.png", id:"florwe4"},
{src:"images/florwe5.png", id:"florwe5"},
{src:"images/florwe6.png", id:"florwe6"},
{src:"images/florwe7.png", id:"florwe7"},
{src:"images/florwe8.png", id:"florwe8"},
{src:"images/florwe9.png", id:"florwe9"},
{src:"images/sflorwe2.png", id:"sflorwe2"}
]
};
// symbols:
(lib.florwe1=function() {
this.initialize(img.florwe1);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,309,504);
(lib.florwe10=function() {
this.initialize(img.florwe10);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,84,68);
(lib.florwe11=function() {
this.initialize(img.florwe11);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,108,112);
(lib.florwe12=function() {
this.initialize(img.florwe12);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,146,89);
(lib.florwe13=function() {
this.initialize(img.florwe13);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,94,96);
(lib.florwe14=function() {
this.initialize(img.florwe14);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,163,193);
(lib.florwe15=function() {
this.initialize(img.florwe15);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,112,122);
(lib.florwe16=function() {
this.initialize(img.florwe16);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,72,96);
(lib.florwe17=function() {
this.initialize(img.florwe17);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,199,146);
(lib.florwe18=function() {
this.initialize(img.florwe18);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,294,293);
(lib.florwe3=function() {
this.initialize(img.florwe3);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,154,88);
(lib.florwe4=function() {
this.initialize(img.florwe4);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,189,140);
(lib.florwe5=function() {
this.initialize(img.florwe5);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,91,88);
(lib.florwe6=function() {
this.initialize(img.florwe6);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,70,110);
(lib.florwe7=function() {
this.initialize(img.florwe7);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,120,76);
(lib.florwe8=function() {
this.initialize(img.florwe8);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,199,91);
(lib.florwe9=function() {
this.initialize(img.florwe9);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,168,162);
(lib.sflorwe2=function() {
this.initialize(img.sflorwe2);
}).prototype=p=new cjs.Bitmap();
p.nominalBounds=new cjs.Rectangle(0,0,111,121);
(lib.补间10=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe18();
this.instance.setTransform(-147,-146.5);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-147,-146.5,294,293);
(lib.补间9=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe18();
this.instance.setTransform(183.2,-97.6,1,1,107);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-183.1,-183.4,366.3,366.9);
(lib.补间8=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe8();
this.instance.setTransform(88.9,-63.8,1,1,119.8);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-88.9,-108.9,177.8,217.9);
(lib.补间7=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe8();
this.instance.setTransform(-106.9,23.2,1,1,-36.8);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-106.9,-96,213.9,192.1);
(lib.补间6=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe6();
this.instance.setTransform(-35,-55);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-35,-55,70,110);
(lib.补间5=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe6();
this.instance.setTransform(-35,-55);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-35,-55,70,110);
(lib.补间4=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe4();
this.instance.setTransform(-94.5,-70);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-94.5,-70,189,140);
(lib.补间3=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe4();
this.instance.setTransform(-94.5,-70);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-94.5,-70,189,140);
(lib.补间1=function() {
this.initialize();
// 图层 1
this.instance=new lib.florwe1();
this.instance.setTransform(-49.3,125.6,0.456,0.456,-127);
this.addChild(this.instance);
}).prototype=p=new cjs.Container();
p.nominalBounds=new cjs.Rectangle(-134.2,-125.5,268.6,251.1);
// stage content:
(lib.flower=function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// 图层 1
this.instance=new lib.补间1("synched",0);
this.instance.setTransform(2011.3,25.8);
this.timeline.addTween(cjs.Tween.get(this.instance).to({rotation:43,guide:{path:[2011.2,25.9,1968.7,57.5,1897.7,103.8,1755.9,196.5,1614,269.6,1415.4,372.3,1245.1,421.7,1032.3,483.5,876.4,458,865.1,456.2,854.5,454.2,788.5,441.4,748.4,420.7,723.8,408,709.6,392.7]}},17).to({scaleX:1,scaleY:1,rotation:88.5,guide:{path:[709.4,392.8,699.1,381.7,694.1,369.2,683.3,342.4,698,311.3,711.5,282.8,744.1,254.5,746.9,252.1,749.8,249.8]}},4).to({rotation:156.9,guide:{path:[749.7,249.8,778.7,225.9,816.5,206.6,857.7,185.5,899.2,175.1,942.7,164.2,976.4,167.7,979.1,167.9,981.7,168.3]}},3).to({scaleX:1,scaleY:1,rotation:273.4,guide:{path:[981.7,168.3,1014.5,173,1032.2,192,1051.6,212.9,1048.9,242.7,1046.6,266.9,1030,295.3]}},5).to({rotation:350.6,guide:{path:[1030,295.3,1027.2,300.2,1023.9,305.2,1002.1,338.3,964.2,373.1,926.2,407.8,876.7,440.1,865.7,447.3,854.3,454.2,848.1,458,841.9,461.6]}},5).to({rotation:382.2,guide:{path:[841.9,461.6,806.6,482.2,768.4,500,732.5,516.7,695.9,530.1]}},4).to({scaleX:1,scaleY:1,rotation:417.6,guide:{path:[695.9,530,671.2,539,646.3,546.5,508,587.6,388.1,574.1,370.2,566.2,343.9,553.9]}},9).to({scaleX:1,scaleY:1,rotation:430.2,guide:{path:[343.7,553.9,336.3,550.4,328.3,546.6,254.5,511.8,184.7,475.3,-38.8,358.3,-140.1,267.2]}},12).to({_off:true},1).wait(71));
// 图层 3
this.instance_1=new lib.补间3("synched",0);
this.instance_1.setTransform(2088.5,108.5);
this.instance_1._off=true;
this.instance_2=new lib.补间4("synched",0);
this.instance_2.setTransform(-153.8,343.9);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_1}]},56).to({state:[{t:this.instance_1}]},28).to({state:[{t:this.instance_1}]},7).to({state:[{t:this.instance_1}]},8).to({state:[{t:this.instance_1}]},6).to({state:[{t:this.instance_2}]},10).to({state:[]},1).wait(15));
this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(56).to({_off:false},0).to({rotation:51.7,guide:{path:[2088.5,108.7,2028.4,137,1934.7,178,1744.1,261.2,1570.1,327.1,1326.6,419.3,1151.2,463.2,932.1,518.1,832.4,494.1,783.2,482.2,744.5,464,702.8,444.3,673.2,417.2,668.1,412.5,663.4,407.7]}},28).to({scaleX:1,scaleY:1,rotation:184.6,guide:{path:[663.1,407.6,644.7,388.5,633.2,366.8,619.6,341.4,616.3,314.2,613.3,288.4,619.9,263.6,626.3,239.4,641.1,219.2,656,199,677.4,185.4,699.6,171.3,726.1,166.1,761.9,159.2,798.9,162.6]}},7).to({rotation:318.2,guide:{path:[798.8,162.7,816.3,164.3,834.1,168.2,887.1,180,922.7,207.4,959.7,235.9,962.5,270.4,965.5,308.7,924.1,344,892.8,370.8,873.4,385.7,843.1,409.2,812.9,427.7]}},8).to({scaleX:1,scaleY:1,rotation:333.9,guide:{path:[812.9,427.6,809.8,429.5,806.7,431.4,776.3,449.6,744.2,463.9,682.5,491.7,595.9,501.8,525.3,510.1,444.8,505.8]}},6).to({_off:true,scaleX:1,scaleY:1,rotation:360,x:-153.8,y:343.9},10).wait(16));
// 图层 5
this.instance_3=new lib.补间5("synched",0);
this.instance_3.setTransform(2075.1,60.1,1,1,39.5);
this.instance_3._off=true;
this.instance_4=new lib.补间6("synched",0);
this.instance_4.setTransform(-167.3,456.4,1,1,100);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_3}]},41).to({state:[{t:this.instance_3}]},22).to({state:[{t:this.instance_3}]},1).to({state:[{t:this.instance_3}]},2).to({state:[{t:this.instance_3}]},3).to({state:[{t:this.instance_3}]},3).to({state:[{t:this.instance_4}]},28).to({state:[]},1).wait(30));
this.timeline.addTween(cjs.Tween.get(this.instance_3).wait(41).to({_off:false},0).to({rotation:66,guide:{path:[2075.1,60.2,2020.9,89.7,1939.2,132.3,1764.2,223.5,1606.3,297.8,1385.2,402.2,1229.5,458.6,1087.5,510,1006.4,519.1]}},22).to({rotation:-75,guide:{path:[1006.2,519.1,976.1,522.5,954.2,520.1,954,519.9,953.8,519.8]}},1).to({scaleX:1,scaleY:1,rotation:60.2,guide:{path:[953.7,519.8,946.5,515.4,936.4,508.4,927.2,502,919.1,495.7]}},2).to({scaleX:1,scaleY:1,rotation:97.6,guide:{path:[919.1,495.7,910.4,489,902.9,482.5]}},3).to({scaleX:1,scaleY:1,rotation:45,guide:{path:[902.9,482.4,901.5,481.2,900.1,480,892.6,482.7,883.5,485.5]}},3).to({_off:true,rotation:100,guide:{path:[883.5,485.6,855.8,494.2,814.2,504.2,703.9,530.6,582.1,542.3,411.4,558.8,242.1,543.4,30.5,524.2,-167.2,456.3]}},28).wait(31));
// 图层 7
this.instance_5=new lib.补间7("synched",0);
this.instance_5.setTransform(2025.9,210.5);
this.instance_5._off=true;
this.instance_6=new lib.补间8("synched",0);
this.instance_6.setTransform(-328,350.1);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_5}]},9).to({state:[{t:this.instance_5}]},15).to({state:[{t:this.instance_5}]},24).to({state:[{t:this.instance_6}]},20).to({state:[]},3).wait(60));
this.timeline.addTween(cjs.Tween.get(this.instance_5).wait(9).to({_off:false},0).to({rotation:23.7,guide:{path:[2025.9,210.7,2013.8,219.9,1991.4,235.5,1945.6,267.2,1891.3,300.6,1717.8,407.5,1525.3,489.1,1479.4,508.5,1433.5,526]}},15).to({scaleX:1,scaleY:1,rotation:52,guide:{path:[1433.6,526,1209.9,611.3,986.7,650.5,675.6,705.2,381.5,666.9]}},24).to({_off:true,scaleX:1,scaleY:1,rotation:0,guide:{path:[381.3,666.9,357.6,663.8,334,660.1,17.7,610.6,-157.4,550.9,-297.7,503.1,-341.9,451,-373.5,413.8,-353.9,378.2,-347.7,367.1,-337.2,357.4,-332.6,353.7,-327.9,350]}},20).wait(63));
// 图层 9
this.instance_7=new lib.补间9("synched",0);
this.instance_7.setTransform(2070.5,-77.3,0.617,0.617,0,0,0,0.3,-0.1);
this.instance_8=new lib.补间10("synched",0);
this.instance_8.setTransform(-188.6,225.3,1.715,1.715,150,0,0,-0.4,0.7);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_7}]}).to({state:[{t:this.instance_7}]},18).to({state:[{t:this.instance_7}]},22).to({state:[{t:this.instance_7}]},19).to({state:[{t:this.instance_8}]},11).to({state:[]},1).wait(60));
this.timeline.addTween(cjs.Tween.get(this.instance_7).to({regX:0,regY:0,scaleX:1,scaleY:1,rotation:78.6,guide:{path:[2070.4,-77.2,1968,-40.2,1805.8,10.6,1647.9,59.8,1495.3,101.7]}},18).to({regX:0.6,regY:-0.5,scaleX:1.22,scaleY:1.22,rotation:220.2,guide:{path:[1495.2,101.9,1330.8,146.8,1172.2,183.3,965.9,230.6,784,259.7]}},22).to({regX:0.3,regY:-0.1,scaleX:1.42,scaleY:1.42,rotation:385.7,guide:{path:[784,259.6,588.7,290.8,421.7,300.8,281.8,309.2,164.5,302.5]}},19).to({_off:true,regX:-0.4,regY:0.7,scaleX:1.72,scaleY:1.72,rotation:510,guide:{path:[164.2,302.6,-50.7,290.3,-189.3,227.1]}},11).wait(61));
// 图层 1
this.instance_9=new lib.补间1("synched",0);
this.instance_9.setTransform(2011.3,191.8);
this.instance_9._off=true;
this.timeline.addTween(cjs.Tween.get(this.instance_9).wait(41).to({_off:false},0).to({rotation:148,guide:{path:[2011.2,191.9,1968.7,223.5,1897.7,269.8,1755.9,362.3,1614,435.6,1597.1,444.4,1580.4,452.7,1400.9,542.5,1245.1,587.7,1032.3,649.5,876.4,624,865.1,622.2,854.5,620.2,788.5,607.4,748.4,586.7,706.1,564.9,694.3,535.2,683.5,508.4,698.2,477.3,710.6,451.1,739.1,425.1]}},17).to({scaleX:1,scaleY:1,rotation:208.5,guide:{path:[738.9,425.2,741.4,422.8,744.1,420.5,774,394.7,813.9,373.9]}},4).to({rotation:268.5,guide:{path:[813.9,373.9,815.2,373.2,816.5,372.6,857.8,351.5,899.2,341.1,939.3,331,971.1,333.2]}},3).to({scaleX:1,scaleY:1,rotation:273.4,guide:{path:[971.1,333.2,973.8,333.4,976.4,333.7,995.3,335.6,1009.5,342.1]}},5).to({rotation:350.6,guide:{path:[1009.6,342,1023,348,1032.2,358,1049.4,376.4,1049.2,401.9]}},5).to({rotation:382.2,guide:{path:[1049.2,402,1049.2,405.3,1048.9,408.7,1046.2,437.1,1023.9,471.2,1002.1,504.3,964.2,539.1,944.7,556.9,922.1,574.1]}},4).to({scaleX:1,scaleY:1,rotation:417.6,guide:{path:[922.1,574.1,900.7,590.4,876.7,606.1,865.6,613.3,854.2,620.2,813.3,645,768.4,666,708.1,694.1,646.2,712.5,507.9,753.6,388.2,740.1,365.3,730.1,328.5,712.7,303,700.7,278.1,688.5]}},9).to({scaleX:1,scaleY:1,rotation:430.2,x:-140.2,y:429.1},12).to({_off:true},1).wait(30));
// 图层 3
this.instance_10=new lib.补间3("synched",0);
this.instance_10.setTransform(2088.5,230.5);
this.instance_10._off=true;
this.instance_11=new lib.补间4("synched",0);
this.instance_11.setTransform(-153.8,343.9);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_10}]},27).to({state:[{t:this.instance_10}]},28).to({state:[{t:this.instance_10}]},7).to({state:[{t:this.instance_10}]},8).to({state:[{t:this.instance_10}]},6).to({state:[{t:this.instance_11}]},10).to({state:[]},1).wait(44));
this.timeline.addTween(cjs.Tween.get(this.instance_10).wait(27).to({_off:false},0).to({rotation:51.7,guide:{path:[2088.5,230.7,2028.4,259,1934.7,300,1744.1,383.2,1570.1,449.1,1326.6,541.3,1151.2,585.2,932.1,640.1,832.4,616.1,783.2,604.2,744.5,586,702.8,566.3,673.2,539.2,668.1,534.5,663.4,529.7]}},28).to({scaleX:1,scaleY:1,rotation:184.6,guide:{path:[663.1,529.6,644.7,510.5,633.2,488.8,619.6,463.4,616.3,436.2,613.3,410.4,619.9,385.6,626.3,361.4,641.1,341.2,656,320.8,677.4,307.2,699.6,293.1,726.1,287.9,761.9,281,798.9,284.4]}},7).to({rotation:318.2,guide:{path:[798.8,284.4,816.3,286,834.1,290,887.1,301.7,922.7,329.2,959.7,357.8,962.5,392.3,965.5,430.6,924.1,466,893.5,492.1,874.3,507]}},8).to({scaleX:1,scaleY:1,rotation:333.9,guide:{path:[874.4,507,873.9,507.3,873.5,507.7,840,533.5,806.8,553.4,776.4,571.6,744.3,585.9,682.5,613.7,595.9,623.8,522.1,632.5,437.4,627.4]}},6).to({_off:true,scaleX:1,scaleY:1,rotation:360,x:-153.8,y:343.9},10).wait(45));
// 图层 5
this.instance_12=new lib.补间5("synched",0);
this.instance_12.setTransform(2165.1,94.1,1,1,39.5);
this.instance_12._off=true;
this.instance_13=new lib.补间6("synched",0);
this.instance_13.setTransform(-167.3,456.4,1,1,100);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_12}]},56).to({state:[{t:this.instance_12}]},22).to({state:[{t:this.instance_12}]},1).to({state:[{t:this.instance_12}]},2).to({state:[{t:this.instance_12}]},3).to({state:[{t:this.instance_12}]},3).to({state:[{t:this.instance_13}]},28).to({state:[]},1).wait(15));
this.timeline.addTween(cjs.Tween.get(this.instance_12).wait(56).to({_off:false},0).to({rotation:66,guide:{path:[2165.1,94.2,2110.9,123.7,2029.2,166.3,1854.2,257.5,1696.3,331.8,1475.2,436.2,1319.5,492.6,1124.9,563.1,1044.4,554.1,1037.1,549.6,1026.7,542.3,1013.4,533.1,1002.4,524.2]}},22).to({rotation:-75,guide:{path:[1002.2,524.3,995.8,519.1,990.2,514.1,975.5,519.3,955.2,525]}},1).to({scaleX:1,scaleY:1,rotation:60.2,guide:{path:[955.2,525,942.9,528.5,928.5,532.2]}},2).to({scaleX:1,scaleY:1,rotation:97.6,guide:{path:[928.4,532.2,922.4,533.7,916,535.3]}},3).to({scaleX:1,scaleY:1,rotation:45,guide:{path:[916,535.3,910.3,536.7,904.3,538.2,900.3,539.1,896.3,540]}},3).to({_off:true,rotation:100,x:-167.3,y:456.4},28).wait(16));
// 图层 7
this.instance_14=new lib.补间7("synched",0);
this.instance_14.setTransform(2265.9,104.5);
this.instance_14._off=true;
this.instance_15=new lib.补间8("synched",0);
this.instance_15.setTransform(-88,244.1);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_14}]},69).to({state:[{t:this.instance_14}]},15).to({state:[{t:this.instance_14}]},24).to({state:[{t:this.instance_15}]},20).wait(3));
this.timeline.addTween(cjs.Tween.get(this.instance_14).wait(69).to({_off:false},0).to({rotation:23.7,guide:{path:[2265.9,104.7,2253.8,113.9,2231.4,129.5,2185.6,161.4,2131.3,194.8,1957.8,301.5,1765.3,383.1,1719.4,402.5,1673.5,420]}},15).to({scaleX:1,scaleY:1,rotation:52,guide:{path:[1673.6,420,1449.9,505.3,1226.7,544.5,915.4,599.2,621.5,560.9]}},24).to({_off:true,scaleX:1,scaleY:1,rotation:0,guide:{path:[621.3,560.9,597.6,557.8,574,554.1,257.7,504.6,82.6,444.9,-57.7,397.1,-101.9,345,-133.5,307.8,-113.9,272.4,-107.7,261.3,-97.2,251.6,-92.6,247.9,-87.9,244.2]}},20).wait(3));
// 图层 9
this.instance_16=new lib.补间9("synched",0);
this.instance_16.setTransform(2040.5,58.7,0.617,0.617,0,0,0,0.3,-0.1);
this.instance_16._off=true;
this.instance_17=new lib.补间10("synched",0);
this.instance_17.setTransform(-218.6,362.3,0.499,0.498,150,0,0,-0.4,0.6);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_16}]},46).to({state:[{t:this.instance_16}]},18).to({state:[{t:this.instance_16}]},22).to({state:[{t:this.instance_16}]},19).to({state:[{t:this.instance_17}]},11).to({state:[]},1).wait(14));
this.timeline.addTween(cjs.Tween.get(this.instance_16).wait(46).to({_off:false},0).to({regX:0,regY:0,scaleX:0.58,scaleY:0.58,rotation:78.6,guide:{path:[2040.4,58.8,1938,95.8,1775.8,146.4,1617.9,195.8,1465.2,237.7]}},18).to({regX:0.6,regY:-0.5,scaleX:0.48,scaleY:0.48,rotation:220.2,guide:{path:[1465.2,237.8,1300.8,282.9,1142.2,319.3,936.2,366.6,754.6,395.6]}},22).to({regX:0.3,regY:-0.1,scaleX:0.51,scaleY:0.51,rotation:385.8,guide:{path:[754.6,395.5,559,426.8,391.7,436.8,251.6,445.2,134.2,438.5]}},19).to({_off:true,regX:-0.4,regY:0.6,scaleX:0.5,scaleY:0.5,rotation:510,guide:{path:[134,438.5,-80.5,426.2,-218.9,363.2]}},11).wait(15));
}).prototype=p=new cjs.MovieClip();
p.nominalBounds=new cjs.Rectangle(2837,252.1,306.3,341.8);
})(lib=lib||{}, images=images||{}, createjs=createjs||{});
var lib, images, createjs;
着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架， 是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。
我们基于 Three.js 来实现一个花瓣雨的效果。
Three.js 的基础
Three.js 用于渲染一个 3D 的场景，里面会有很多物体，比如立方体、圆柱、圆环、圆锥等各种几何体(以 Geometry 为后缀)，比如点（Points）线（Line）面（Sprite）等基础物体。这些所有的物体怎么管理呢？
用一个场景 Scene 来承载，所有的物体都会被添加到 Scene 里。
所以有这样的 api：
const scene=new THREE.Scene();
scene.add(xxx);
scene.add(yyy);
当然，物体之间可以做分组 Group，组内的物体可以统一管理，之后再添加到 Scene 里。
const scene=new THREE.Scene();
const group=new THREE.Group();
group.add(xxx);
group.add(yyy);
scene.add(group);
这种场景、物体、分组的概念，在很多游戏引擎中也有类似的 api，大家都是这么来管理的。
可以添加到 Scene 中的物体，除了几何体（Geometry）、点线面等，还有辅助工具，比如坐标系工具（AxisHelper）。其实这些工具也是用集合体、点线面封装出来的，只不过是作为工具来临时添加到 Scene 中。
const axisHelper=new THREE.AxisHelper(max);
scene.add(axisHelper)
有了场景和场景中的各种物体，怎么渲染出来呢？
调用 Renderer，这个类是专门负责渲染 Scene 中各种物体的。
但是还有个问题，三维的世界（scene）怎么渲染到二维的屏幕呢？
图片
图片
如图，从一个点找个角度来看三维世界，或者从一个平面来平行的看三维世界，看到的就是二维的。
这两种方式，第一种叫做透视、第二种叫做正交。
生成二维图像，就像照相机的功能一样，所以这种概念叫做 Camera。
在 Three.js 里面有 PerspectiveCamera （透视相机）和 OrthographicCamera（正交相机），分别对应上面两种三维转二维的方式。
这两个 Camera 的参数还是挺多的，但是理解了也挺简单：
new Three.PerspectiveCamera( fov, aspect, near, far )
new Three.OrthographicCamera( left, right, top, bottom, near, far )
先看透视相机的，它要看三维世界，那就要有一个最近和最远两个位置，然后从一个点看过去会有一个视野的角度，看到的画面还有个宽高比。
这就是为什么 PerspectCamera 有 near、far、fov、aspect 这四个参数。
图片
正交相机的参数也是差不多的意思，不过因为不是从一个点，看的，而是从一个面做的投影，那么就没有角度的参数，而是有上下左右的四个面位置的参数。
图片
正交相机的上下左右位置也不是随便的，比例要和画面的宽高比一样，所以一般都是这么算：
const width=window.innerWidth;
const height=window.innerHeight;
//窗口宽高比
const k=width / height;
//三维场景的显示的上下范围
const s=200;
// 上下范围 s 再乘以宽高比 k 就是左右的范围，而远近随便设置一个数就行
const camera=new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
上面的正交相机的参数里面，远近可以设置为 1 和 1000，上下设置为 200，左右就可以根据宽高比算出来。这就是相机所看到的二维画面的范围。
有了场景 Scene 中的各种物体，有了照相机 Camera，就可以用渲染器 Renderer 渲染出画面来了。
const renderer=new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(width, height)
renderer.render(scene, camera)
不过，一般不会只渲染一帧，有动画效果的话，会使用 requestAnimationFrame 的 api 一帧帧的不停渲染。
function render() {
renderer.render(scene, camera)
requestAnimationFrame(render)
}
render();
这就是 Three.js 的大概流程：Scene 中有几何体Geometry、点线面、辅助工具等各种物体，物体还可以做分组，然后通过正交或者透视相机来设置看到的二维画面，之后用 Renderer 渲染出来。有动画效果的话，要用 requestAnimationFrame 来一帧帧的渲染。
下面我们来实现一下花瓣雨的效果。
花瓣雨实现
首先我们要创建场景 Scene 中的物体，也就是各种花瓣，这个需要显示的是一个平面，可以用 Sprite。
Sprite 是精灵的意思，在 Three.js 中，它就是一个永远面向相机的二维平面。
我们给 Sprite 贴上花瓣的纹理就可以了。
我们先准备一些花瓣的贴图,类似这种：
图片
图片
花瓣的数量有很多，我们生成 400 个，加到花瓣分组里，然后添加到场景中：
const scene=new THREE.Scene();
/**
* 花瓣分组
*/
const petal=new THREE.Group();
function create() {
var texture1=new THREE.TextureLoader().load("img/h1.png");
var texture2=new THREE.TextureLoader().load("img/h2.png");
var texture3=new THREE.TextureLoader().load("img/h3.png");
var texture4=new THREE.TextureLoader().load("img/h4.png");
var texture5=new THREE.TextureLoader().load("img/h5.png");
var imageList=[texture1, texture2, texture3, texture4, texture5];
for (let i=0; i < 400; i++) {
var spriteMaterial=new THREE.SpriteMaterial({
map: imageList[Math.floor(Math.random() * imageList.length)],//设置精灵纹理贴图
});
var sprite=new THREE.Sprite(spriteMaterial);
petal.add(sprite);
sprite.scale.set(40, 50, 1);
sprite.position.set(2000 * (Math.random() - 0.5), 2000 * Math.random(), 0)
}
scene.add(petal)
}
create();
400 个 Sprite 随机贴上了不同的花瓣的纹理贴图，然后设置了下放缩，之后随机设置了一个在场景中的位置。
我们在 Scene 中加入坐标系辅助工具来看下坐标：
const axisHelper=new THREE.AxisHelper(1000);
scene.add(axisHelper)
图片
红色是 x 轴，向右是递增的，绿色是 y 轴，向上是递增的。z 轴我们暂时用不到。
所以，根据代码，花瓣的 x 的范围就是随机的 -1000 到 1000，y 的范围就是 0 到 2000。
然后，我们创建正交相机：
const width=window.innerWidth;
const height=window.innerHeight;
//窗口宽高比
const k=width / height;
//三维场景的显示的上下范围
const s=200;
const camera=new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
设置下相机的位置和方向：
camera.position.set(0, 200, 500)
camera.lookAt(scene.position)
我们创建相机的时候指定了二维能显示的范围，相机在这个范围内的哪个位置都行。
然后创建渲染器，设置下大小和背景颜色，把渲染到的 canvas 元素插入到 dom 中。
const renderer=new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(width, height)
//设置背景颜色
renderer.setClearColor(0xFFFFFF, 1)
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement)
之后就用 requestAnimation 不断地一帧帧渲染就行了。
function render() {
petal.children.forEach(sprite=> {
sprite.position.y -=1;
sprite.position.x +=0.5;
if (sprite.position.y < -400) {
sprite.position.y=800;
}
if (sprite.position.x > 1000) {
sprite.position.x=-1000
}
});
renderer.render(scene, camera)
requestAnimationFrame(render)
}
每次重新渲染之前，我们修改下花瓣的位置，产生下落效果，如果超出了范围，就移到上面去重新开始落，这样就是不间断的花瓣雨效果。
图片
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花瓣雨</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="js/three.min.js"></script>
</head>
<body>
<script>
const scene=new THREE.Scene();
/**
* 花瓣分组
*/
const petal=new THREE.Group();
const width=window.innerWidth;
const height=window.innerHeight;
//窗口宽高比
const k=width / height;
//三维场景的显示的上下范围
const s=200;
const camera=new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
const renderer=new THREE.WebGLRenderer();
function create() {
//设置相机位置
camera.position.set(0, 200, 500)
camera.lookAt(scene.position)
//设置渲染区域尺寸
renderer.setSize(width, height)
//设置背景颜色
renderer.setClearColor(0xFFFFFF, 1)
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement)
// const axisHelper=new THREE.AxisHelper(1000);
// scene.add(axisHelper)
var textureTree1=new THREE.TextureLoader().load("img/h1.png");
var textureTree2=new THREE.TextureLoader().load("img/h2.png");
var textureTree3=new THREE.TextureLoader().load("img/h3.png");
var textureTree4=new THREE.TextureLoader().load("img/h4.png");
var textureTree5=new THREE.TextureLoader().load("img/h5.png");
var imageList=[textureTree1, textureTree2, textureTree3, textureTree4, textureTree5];
for (let i=0; i < 400; i++) {
var spriteMaterial=new THREE.SpriteMaterial({
map: imageList[Math.floor(Math.random() * imageList.length)],//设置精灵纹理贴图
});
var sprite=new THREE.Sprite(spriteMaterial);
petal.add(sprite);
sprite.scale.set(40, 50, 1);
sprite.position.set(2000 * (Math.random() - 0.5), 2000 * Math.random(), 0)
}
scene.add(petal)
}
function render() {
petal.children.forEach(sprite=> {
sprite.position.y -=1;
sprite.position.x +=0.5;
if (sprite.position.y < -400) {
sprite.position.y=800;
}
if (sprite.position.x > 1000) {
sprite.position.x=-1000
}
});
renderer.render(scene, camera)
requestAnimationFrame(render)
}
create()
render()
</script>
</body>
</html>
总结
Three.js 是为了简化 3D 渲染的框架，它提供了场景 Scene 的 api，里面可以包含各种可渲染的物体：立方体、圆锥等各种几何体 Geometry、点线面、坐标系等辅助工具。这些物体还可以通过 Group 分组来统一管理。
Sence 要渲染出来需要指定一个相机，分为从点去看的透视相机 PerspectiveCamera，从平面去投影的正交相机 OrthographicCamera。理解了它们的原理才能理解 Camera 的参数。
之后通过 Renderer 渲染出来，如果有动画需要用 requestAnimationFrame 来一帧帧的渲染。
这是 Three.js 的大概渲染流程。
之后我们实现了一个花瓣雨的案例。用到了 Sprite 这种物体，它是一个永远面向相机的平面，用来做这种效果很合适。
当然，Three.js 的东西还是比较多的，这篇文章只是入下门，后面我们会继续深入，做更多的有意思的 3D 场景和效果。
*请认真填写需求信息，我们会在24小时内与您取得联系。
