HTML5에 이미지 애니메이션 효과를 추가하는 방법-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

coldplay.xixi

Mar 04, 2021 pm 03:35 PM

html5

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

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

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

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

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

CSS3 그라디언트/애니메이션 적용 시 시간을 제어하는 속성이 있습니다. code><타이밍 기능> . 일반적으로 사용되는 3차 베지어 곡선 외에도 혼란스러운 steps() 함수도 있습니다. <timing-function> 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.