超酷光带效果

标签: 效果 | 发表时间:2011-05-03 12:38 | 作者:molehill 刘潇
出处:http://www.cnblogs.com/

今天看到一个网站上超酷的光带效果,分享给大家看看~

查看效果:超酷光带效果 (flash载入需要等待一点时间) 

部分代码:

 /**

 * Copyright david1 ( http://wonderfl.net/user/david1 )
 * MIT License ( 
http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: 
http://wonderfl.net/c/gjQv
 
*/

// forked from one_truth's forked from: 光るリボン(Ribbon Light)
// forked from mousepancyo's 光るリボン(Ribbon Light)
// forked from nutsu's SketchSample6
package  {
    
import flash.display.Sprite;
    
import flash.display.BitmapData;
    
import flash.display.Bitmap;
    
import flash.events.Event;
    
import flash.filters.BlurFilter;
    
import flash.geom.Point;
    
import flash.geom.ColorTransform;
    
    [SWF(width
=465,height=465,backgroundColor=0x000000,frameRate=60)]
    
    
public class Main extends Sprite{
        
        
private const WIDTH:Number  = 465;
        
private const HEIGHT:Number = 465;
        
        
private var _sketch:CurveSketch;
        
private var _bmd:BitmapData;
        
private var _bm:Bitmap;
        
private var _container:Sprite = new Sprite();

        
public function Main() {
            graphics.beginFill(
0)
            graphics.drawRect(
00, WIDTH, HEIGHT)
            graphics.endFill()
            addChild(_container);
            
//
            _sketch = new CurveSketch();
            _bmd 
= new BitmapData(WIDTH, HEIGHT, true0);
            _container.addChild(_sketch);
            _container.addChild(_bm 
= new Bitmap(_bmd) as Bitmap);
            _bm.blendMode 
= "add";
            
//
            addEventListener(Event.ENTER_FRAME, update);
        }
        
        
private function update(e:Event):void{
            _bmd.draw(_sketch, 
nullnull"add");
            _bmd.applyFilter(_bmd, _bmd.rect, 
new Point(), new BlurFilter(884));
        }
    }
}



//package {
    import frocessing.display.F5MovieClip2D;
    
import frocessing.geom.FGradientMatrix;
    
import frocessing.color.ColorHSV
    
    
class CurveSketch extends F5MovieClip2D
    {
        
        
//加速度運動の変数
        
//位置
        private var xx:Number;
        
private var yy:Number;
        
//速度
        private var vx:Number;
        
private var vy:Number;
        
//加速度の係数
        private var ac:Number;
        
//速度の減衰係数
        private var de:Number;
        
        
//描画座標
        private var px0:Array;
        
private var py0:Array;
        
private var px1:Array;
        
private var py1:Array;
        
        
private var t:Number = 0
        
        
//描画グループ
        private var shapes:Array;
        
        
public function CurveSketch() 
        {
            
            
//初期化
            vx = vy = 0.0;
            xx 
= mouseX;
            yy 
= mouseY;
            ac 
= 0.06;
            de 
= 0.9;
            px0 
= [xx, xx, xx, xx];
            py0 
= [yy, yy, yy, yy];
            px1 
= [xx, xx, xx, xx];
            py1 
= [yy, yy, yy, yy];
                        
            shapes 
= [];
            
            
//線と塗りの色指定
            noStroke();            
        }
        
        
public function draw():void
        {
            
//加速度運動
            xx += vx += ( mouseX - xx ) * ac;
            yy 
+= vy += ( mouseY - yy ) * ac;
            
            var len:Number 
= mag( vx, vy );
            
            
//新しい描画座標
            var x0:Number = xx + 1 + len * 0.1;
            var y0:Number 
= yy - 1 - len * 0.1;
            var x1:Number 
= xx - 1 - len * 0.1;
            var y1:Number 
= yy + 1 + len * 0.1;
            
            
//描画座標
            px0.shift(); px0.push( x0 );
            py0.shift(); py0.push( y0 );
            px1.shift(); px1.push( x1 );
            py1.shift(); py1.push( y1 );
            
            var _px0:Array 
= [px0[0], px0[1], px0[2], px0[3]];
            var _py0:Array 
= [py0[0], py0[1], py0[2], py0[3]];
            var _px1:Array 
= [px1[0], px1[1], px1[2], px1[3]];
            var _py1:Array 
= [py1[0], py1[1], py1[2], py1[3]];
            
            shapes.push( { px0:_px0, py0:_py0, px1:_px1, py1:_py1, mtx:
null} );
            
if (shapes.length >= 50) shapes.shift();
            
            var shapesLength:
int = shapes.length;
            
for (var i:int = shapesLength-1; i >= 0; i--
            {
                var sh:Object 
= shapes[i];
                
                var color:ColorHSV 
= new ColorHSV(t, 0.810.1)
                t 
+= 0.05;
                
                beginFill(
int(color), 0.2)
                beginShape();
                curveVertex( sh.px0[
0], sh.py0[0] );
                curveVertex( sh.px0[
1], sh.py0[1] );
                curveVertex( sh.px0[
2], sh.py0[2] );
                curveVertex( sh.px0[
3], sh.py0[3] );
                vertex( sh.px1[
2], sh.py1[2] );
                curveVertex( sh.px1[
3], sh.py1[3] );
                curveVertex( sh.px1[
2], sh.py1[2] );
                curveVertex( sh.px1[
1], sh.py1[1] );
                curveVertex( sh.px1[
0], sh.py1[0] );
                endShape();
            }
            
            
            
//減衰処理
            vx *= de;
            vy 
*= de;
        }

    }
//}

作者: molehill 发表于 2011-05-03 12:38 原文链接

评论: 13 查看评论 发表评论


最新新闻:
· 埃及Facebook革命内情(2011-05-03 21:05)
· 淘宝打假改变美国印象获贸易办公室认同(2011-05-03 21:04)
· 和墙对话(2011-05-03 20:38)
· 天文学家创造早期宇宙3D地图(2011-05-03 20:20)
· TechCrunch点评人人IPO:虽像Facebook但并不是(2011-05-03 20:17)

编辑推荐:再论抽象

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [效果] 推荐:

超酷光带效果

- 刘潇 - 博客园-首页原创精华区
今天看到一个网站上超酷的光带效果,分享给大家看看~. 查看效果:超酷光带效果 (flash载入需要等待一点时间) . // forked from one_truth's forked from: 光るリボン(Ribbon Light). // forked from mousepancyo's 光るリボン(Ribbon Light).

CSS3动画效果-animate.css

- - WEB前端开发
animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体验. 动画效果包括强调突出,滑块,淡入淡出,放大缩小等等. 你也可以结合jQuery一起使用,例如$(‘.bouncy’).addClass(‘bounceInDown’); 项目主页:http://daneden.me/animate/ git地址:https://github.com/daneden/animate.css 声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《CSS3动画效果-animate.css》.

Jquery easyui 下loaing效果

- - CSDN博客推荐文章
beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功,关闭进度条. 作者:songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读:15 评论:0 查看评论.

Axure常用交互效果制作

- snip.wu - 盛大游戏UED 专注用户体验,改变生活,让互动娱乐更精彩
本文旨在分享一些在Axure中,相对复杂但又常见的交互行为的制作方法,本期包含带提示的文本框和拖拽效果. 将提示信息放置于文本框内是一种常见的交互方式. 当文本框获得焦点时,提示文字消失. 当文本框失去焦点时,提示文字重新显示出来. 现在就让我们看下这种控件的制作方法. 从widget库中拖出text field控件.

45个创意的照片PS效果

- Desmond - 创意悠悠花园
如果你有高超的PS技术,想对自己的照片进行一些创意的操作,那么今天分享的:45个创意的照片PS效果,应该会有你喜欢的,或者可以给你带来灵感. Read the rest of 45个创意的照片PS效果 (130 words). © emilo for 创意悠悠花园, 2011. Post tags: PS效果, 创意, 照片.

js等待加载效果2

- - CSDN博客推荐文章
实例可以直接运行查看效果.
正在加载中. 作者:junmoxie 发表于2012-8-6 13:15:51 原文链接. 阅读:0 评论:0 查看评论.

常用CSS3动画效果合集-animate.css

- - 我爱互联网
css是一个比较酷、炫的一个动画合集,很方便在你的项目中使用. 更便于你来寻找CSS的动画效果. 47款惊人的CSS3动画效果. 非常有用的HTML5,CSS3的框架. 10款令人难以相信的CSS3绘图效果. 18个明亮型纯CSS的绘图示例. 什么是HTML5和CSS3. HTML5和CSS3的新特性 (@yixieshi).

14个HTML5实现的效果合集

- - 互联网的那点事
HTML5可不是什么虚幻的概念,与其高谈阔论的讨论HTML5未来的趋势和价值,不如一起研究一下现在的HTML5可以做出哪些成果,可以让我们做出出色的产品. Form Follows Function就是一個展示HTML5实现的网站,目前网站展示了14个作品,其中包括了交互操作以及视觉效果. 这些效果本身并不是一个完整的产品,但是加入到产品中就能让产品生色不少.

量化InnoDB group commit的效果

- - OurMySQL
前几天有位开发的同学问了个问题,InnoDB的group commit效果如何. 之前说好了回头给看下,结果险些拖过年. Group commit 背景.         InnoDB的redo log的group commit历史比较悠久了(有别于binlog的group commit). 如果设置为1,每次事务提交都至少需要写一次redolog.