집 > 기사 > 웹 프론트엔드 > HTML5에 이미지 애니메이션 효과를 추가하는 방법

HTML5에 이미지 애니메이션 효과를 추가하는 방법

coldplay.xixi원래의: 2021-03-04 15:35:555730검색

html5에 이미지 애니메이션 효과를 추가하는 방법: 1. CSS3 애니메이션 단계를 사용하여 스피릿 애니메이션을 구현합니다. 2. html5 캔버스를 사용하여 gif 이미지를 구현합니다.

이 튜토리얼의 운영 환경: windows7 시스템, html5&&css3 버전, DELL G3 컴퓨터.

HTML5에서 이미지 애니메이션 효과를 추가하는 방법:

방법 1: CSS3 애니메이션 단계를 사용하여 스피릿 스프라이트 애니메이션 구현

CSS3 그라디언트/애니메이션 적용 시 시간을 제어하는 속성이 있습니다. code>c20e3a8d19de7a88dfb87804151ab5ee . 일반적으로 사용되는 3차 베지어 곡선 외에도 혼란스러운 steps() 함수도 있습니다. 66aa3d34d47552b7b986fe2a4b5468d0 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 steps() 函数。

steps()

steps() 첫 번째 매개변수 번호는 지정된 간격 번호(양의 정수여야 함)입니다. 즉, 애니메이션이 단계적 표시를 위해 n 단계로 나누어집니다. 두 번째 매개변수의 기본값은 end입니다. 마지막 단계의 상태를 설정하며, start는 끝의 상태이고 end는 시작의 상태입니다.

이 단계()를 사용하면 웹에서 일반적인 스프라이트 애니메이션을 구현할 수 있습니다. 데모를 참조하세요.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    .bird{background: url(bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite; }
    @keyframes bird{
       from {
          background-position: 0 0;
       }
       to {
          background-position: -800% 0px;
       }
    }
    </style>
    </head>
    <body>
       <div></div>
    </body>
</html>

방법 2: html5 캔버스를 사용하여 gif 이미지를 구현합니다.

캔버스의 drawImage를 사용하여 이미지 로드를 포함하는 프레임을 변환합니다. 캔버스에 넣은 다음 js와 결합하여 애니메이션을 구현하세요. 데모 보기:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas帧--实现动画</title>
    <style>
        *{padding:0;margin:0;}
        canvas{display:block;background:white}
    </style>
</head>
<body>
    <canvas></canvas>
<script>
    var imgPic = new Image();
    imgPic.src = &#39;http://www.cj365.cc/demo/bird/bird.png&#39;;
    var canvas = document.querySelector(&#39;canvas&#39;);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext(&#39;2d&#39;);
    imgPic.onload = function () {
        drawImg()
    }
    var i = 0;
    var lastTime = new Date().getTime();
    var delatime;
    var timer = 0;
    function drawImg() {
        window.requestAnimationFrame(drawImg);
        var now = new Date().getTime();
        delatime = now - lastTime;
        lastTime = now;
        timer += delatime;
        if (timer > 200) {
            i++;
            if (i > 7) i = 0;
            timer = 0
        }
        console.log(delatime)
        ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);
    }
</script>
</body>
</html>

관련 학습 권장 사항: html 비디오 튜토리얼

🎜

위 내용은 HTML5에 이미지 애니메이션 효과를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css3 html JS number function animation canvas

성명：

이전 기사：HTML 5를 사용하여 간단한 시계 효과 만들기다음 기사：HTML 5를 사용하여 간단한 시계 효과 만들기