집 > 기사 > 웹 프론트엔드 > Canvas가 비 애니메이션을 구현하는 방법에 대한 예 공유

Canvas가 비 애니메이션을 구현하는 방법에 대한 예 공유

小云云원래의: 2018-03-09 10:49:421939검색

코드펜에서 Canvas로 만든 비 효과 애니메이션을 봤는데 꽤 흥미로웠어요. 나는 몇 가지 연구를 수행했으며 여기서 구현 기술을 공유하겠습니다.

효과 스크린샷:

Canvas 애니메이션 기본

우리 모두 알고 있듯이 Canvas는 실제로 그림판일 뿐입니다. 캔버스 API를 사용하여 다양한 그래픽을 그릴 수 있습니다.

Canvas 2D API: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

그런 다음 캔버스 그리기 애니메이션 단계는 다음과 같습니다.

그래픽의 첫 번째 프레임을 그립니다(다음을 사용). API 그리기)
아트보드 지우기(clearRect() 또는 fillRect() 적용)
애니메이션의 다음 프레임 그리기

애니메이션의 각 프레임 그리기 시간을 제어하려면 무엇을 사용해야 할까요? 누구나 window.setInterval()과 window.setTimeout()을 생각하기 쉽습니다. 네, 이 두 가지도 사용할 수 있습니다. 또한 나중에 window.requestAnimationFrame(callback)이라는 새로운 메서드가 등장했습니다.

requestAnimationFrame은 애니메이션을 그리고 싶다고 브라우저에 알려줍니다. 다시 그리려고 할 때 브라우저가 지정된 메서드(콜백)를 호출하여 애니메이션을 그리도록 합니다.

사용법은 다음과 같습니다:

function anim() {
    ctx.fillStyle = clearColor;
    ctx.fillRect(0,0,w,h);
    for(var i in drops){
        drops[i].draw();
    }
    requestAnimationFrame(anim);
}

일반적으로 브라우저 다시 그리기 빈도와 애니메이션 그리기 빈도를 일치시키기 위해 requestAnimationFrame을 사용하는 것이 우선순위입니다. 불행하게도 requestAnimationFrame의 호환성은 아직 좋지 않습니다. IE9 이하와 addroid 4.3 이하에서는 이 속성을 지원하지 않는 것 같습니다. 이를 지원하지 않는 브라우저는 호환성을 위해 setInterval 또는 setTimeout을 사용해야 합니다.

빗방울 떨어지는 효과

먼저 빗방울 떨어지는 효과를 만드는 방법에 대해 이야기해 보겠습니다. 빗방울은 실제로는 직사각형이고 잔상이 추가됩니다. 잔상을 그리는 것은 빗방울의 행방을 알아내는 열쇠라고 할 수 있다. 잔상은 정방향으로 매 프레임마다 반투명한 배경과 직사각형을 그린 후, 앞서 그린 그래픽을 겹쳐서 만들어내는 효과이다. 앞쪽 방향의 그래픽이 마지막에 그려지기 때문에 더 밝게 보이고, 뒤쪽의 그래픽이 더 많이 겹쳐서 시각적으로 약해집니다. 모든 것이 잔상처럼 보입니다. 여기서 중요한 점은 투명한 배경을 그리는 것입니다. 그렇지 않으면 오버레이 효과가 생성되지 않습니다.

그럼 빗방울을 그려볼까요? 먼저 화판을 준비하세요:

html 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霓虹雨</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
        .bg {
            background: #000;
            overflow: hidden;
        }
    </style>

</head>
<body class="bg">
<canvas id="canvas-club"></canvas>
<script type="text/javascript" src="raindrop.js"></script>
</body>
</html>

js 파일에 애니메이션(raindrop.js)을 그립니다. 코드는 다음과 같습니다:

var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = &#39;rgba(0, 0, 0, .1)&#39;;//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function RainDrop(){}
//雨滴对象 这是绘制雨滴动画的关键
RainDrop.prototype = {
    init:function(){
        this.x =  random(0, w);//雨滴的位置x
        this.y = 0;//雨滴的位置y
        this.color = &#39;hsl(180, 100%, 50%)&#39;;//雨滴颜色 长方形的填充色
        this.vy = random(4, 5);//雨滴下落速度
        this.hit = random(h * .8, h * .9);//下落的最大值
        this.size = 2;//长方形宽度
    },
    draw:function(){
        if (this.y < this.hit) {
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.size, this.size * 5);//绘制长方形，通过多次叠加长方形，形成雨滴下落效果
        }
        this.update();//更新位置
    },
    update:function(){
        if(this.y < this.hit){
            this.y += this.vy;//未达到底部，增加雨滴y坐标
        }else{
            this.init();
        }
    }
};

function resize(){
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
}

//初始化一个雨滴
var r = new RainDrop();
r.init();

function anim() {
    ctx.fillStyle = clearColor;//每一帧都填充背景色
    ctx.fillRect(0,0,w,h);//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
    r.draw();//绘制雨滴
    requestAnimationFrame(anim);//控制动画帧
}

window.addEventListener("resize", resize);
//启动动画
anim();

잔물결 효과

그런 다음 파급효과를 그려보세요. 빗방울을 그리는 방식과 유사하게, 투명한 배경에 이전 이미지를 겹쳐서 내부 그림자 효과를 만들어냅니다.

코드는 다음과 같습니다(rippling.js):

var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = &#39;rgba(0, 0, 0, .1)&#39;;//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function Rippling(){}
//涟漪对象 这是涟漪动画的主要部分
Rippling.prototype = {
    init:function(){
        this.x = random(0,w);//涟漪x坐标
        this.y = random(h * .8, h * .9);//涟漪y坐标
        this.w = 2;//椭圆形涟漪宽
        this.h = 1;//椭圆涟漪高
        this.vw = 3;//宽度增长速度
        this.vh = 1;//高度增长速度
        this.a = 1;//透明度
        this.va = .96;//涟漪消失的渐变速度
    },
    draw:function(){
        ctx.beginPath();
        ctx.moveTo(this.x, this.y - this.h / 2);
        //绘制右弧线
        ctx.bezierCurveTo(
            this.x + this.w / 2, this.y - this.h / 2,
            this.x + this.w / 2, this.y + this.h / 2,
            this.x, this.y + this.h / 2);
        //绘制左弧线
        ctx.bezierCurveTo(
            this.x - this.w / 2, this.y + this.h / 2,
            this.x - this.w / 2, this.y - this.h / 2,
            this.x, this.y - this.h / 2);
        
        ctx.strokeStyle = &#39;hsla(180, 100%, 50%, &#39;+this.a+&#39;)&#39;;
        ctx.stroke();
        ctx.closePath();
        this.update();//更新坐标
    },
    update:function(){
        if(this.a > .03){
            this.w += this.vw;//宽度增长
            this.h += this.vh;//高度增长
            if(this.w > 100){
                this.a *= this.va;//当宽度超过100，涟漪逐渐变淡消失
                this.vw *= .98;//宽度增长变缓慢
                this.vh *= .98;//高度增长变缓慢
            }
        } else {
            this.init();
        }

    }
};

function resize(){
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
}

//初始化一个涟漪
var r = new Rippling();
r.init();

function anim() {
    ctx.fillStyle = clearColor;
    ctx.fillRect(0,0,w,h);
    r.draw();
    requestAnimationFrame(anim);
}

window.addEventListener("resize", resize);
//启动动画
anim();

Summary

이렇게 하면 모두가 비 효과 제작 방법 전체에 대해 어느 정도 이해하고 있어야 합니다. 애니메이션을 그리는 데 사용되는 캔버스의 효과는 실제로 눈길을 사로잡으며 웹의 시각적 효과를 크게 향상시킵니다. 여러분 자신의 지혜를 활용하면 더 멋진 애니메이션을 만들 수 있다고 믿습니다. 이것이 제가 웹을 점점 더 좋아하게 되는 이유 중 하나입니다O(∩_∩)O~~.

Canvas가 비 애니메이션을 구현하는 방법에 대한 예 공유

관련 기사