canvas(九)动画、补间动画

最新推荐文章于 2024-06-14 17:08:14 发布
最新推荐文章于 2024-06-14 17:08:14 发布
阅读量687 收藏
点赞数
分类专栏： canvas 文章标签： canvas 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44178305/article/details/122856198
版权
本文探讨了使用HTML5 canvas实现动画的基础步骤，包括使用setTimeout和setInterval，以及requestAnimationFrame来驱动动画，重点介绍了弹性小球的案例，并对比了不同方法的优缺点。此外，文章还涉及补间动画的应用，如Tween.js实现悠悠球效果和颜色过渡。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

动画

动画实现步骤

  • 清理画布：ctx.clearRect(0,0,canvas.width,canvas.height)
  • 保存 canvas 上下文对象的状态：ctx.save()
  • 绘制动画图形：…
  • 恢复 canvas 上下文对象的状态：ctx.restore()
    在这里插入图片描述

驱动动画的方法

  • setTimeOut(fn,time) 和setInterval(fn,time)
    • 优点：使用方便，动画的时间间隔可以自定义。
    • 缺点：隐藏浏览器标签后，会依旧运行，造成资源浪费。与浏览器刷新频率不同步。
  • requestAnimationFrame(fn)
    • 优点：性能更优良。隐藏浏览器标签后，便不会运行。与浏览器刷新频率同步。
    • 缺点：动画的时间间隔无法自定义

动画实现弹性小球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性运动</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    const [width,height]=[window.innerWidth,window.innerHeight];
    canvas.width=width;
    canvas.height=height;
    //画笔
    const  ctx=canvas.getContext('2d');
    //小球对象化
    class Ball{
        constructor(r,color='#000'){
            this.color=color;
            this.r=r;
            this.x=0;
            this.y=0;
        }
        draw(ctx){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle=this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
            ctx.fill();
            ctx.restore();
        }
    }
    //实例化小球
    let ball=new Ball(15);
    ball.y=50;
    ball.x=width/2;
    //记录时间 time
    let time=new Date();
    //重力 gravity
    const gravity=0.01;
    //弹力
    const bounding=-0.8;
    //速度/毫秒 vy
    let vy=0.3;
    let vx=0.3;
    //动画方法
    function animate(){
        //时间差
        let now=new Date();
        let diff=now-time;
        time=now;
        //加速度
        vy+=gravity;
        //设置小球位置
        ball.y+=vy*diff;
        ball.x+=vx*diff;
        //底部碰撞
        if(ball.y+ball.r>height){
            ball.y=height-ball.r;
            vy*=bounding;
        }
        //左侧碰撞
        if(ball.x-ball.r<0){
            ball.x=ball.r;
            vx*=bounding;
        }
        //右侧碰撞
        if(ball.x+ball.r>width){
            ball.x=width-ball.r;
            vx*=bounding;
        }

    }
    //渲染方法
    !(function render(){
        //设置动画
        animate();
        //擦除
        ctx.clearRect(0,0,width,height);
        //绘图
        ball.draw(ctx);
        //递归调用render 函数
        window.requestAnimationFrame(render);
    })()
</script>
</body>
</html>

补间动画

  • 补间动画是在两个关键帧之间，以某种算法自动计算物体运动的插值，从而形成一种过度效果。
    在这里插入图片描述

用tween.js 做补间动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补间动画</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./js/Tween.js"></script>
<script>
    const [width,height]=[window.innerWidth,window.innerHeight];
    const canvas=document.getElementById('canvas');
    canvas.width=width;
    canvas.height=height;
    const  ctx=canvas.getContext('2d');
    //小球对象化
    class Ball{
        constructor(r,color='#000'){
            this.color=color;
            this.r=r;
            this.x=0;
            this.y=0;
        }
        draw(ctx){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle=this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
            ctx.fill();
            ctx.restore();
        }
    }
    //实例化小球
    const ball=new Ball(15);
    ball.x=width/2;
    ball.y=50;
    //实例化Tween 对象,为其添加目标对象
    const tween=new TWEEN.Tween(ball);
    //设置目标对象一段时间后的状态to({ key:val }, 时间长度)
    tween.to({y:700},2000);
    //开始计时 start()
    tween.start();
    //重复 repeat(Infinity)
    tween.repeat(Infinity)
    //悠悠球 yoyo(true)
    tween.yoyo(true);
    //设置插值 easing()
    //Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back,Bounce
    tween.easing(TWEEN.Easing.Bounce.Out)
    //事件监听
    //onStart, onStop, onUpdate, onComplete
    tween.onUpdate(function(){
        console.log(this.y);
    })
    //渲染方法
    !(function render(){
        //TWEEN 更新目标目标对象的状态
        TWEEN.update();
        //擦除
        ctx.clearRect(0,0,width,height);
        //绘图
        ball.draw(ctx);
        //递归调用render 函数
        window.requestAnimationFrame(render);
    })()
</script>
</body>
</html>
颜色也可以做补件动画
  • tween.js 并没有提供颜色的过度方法，所以我把d3 的color 插件拼装到了tween.js 中去，形成了一个SupTween.js，使用之前需要引入d3-color.js
  • 补间动画实现颜色变化
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补间动画</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./js/d3-color.js"></script>
<!--<script src="./js/Tween.js"></script>-->
<script src="./js/SupTween.js"></script>
<script>
    const [width,height]=[window.innerWidth,window.innerHeight];
    const canvas=document.getElementById('canvas');
    canvas.width=width;
    canvas.height=height;
    const  ctx=canvas.getContext('2d');
    //小球对象
    class Ball{
        constructor(r,color='#000'){
            this.color=color;
            this.r=r;
            this.x=0;
            this.y=0;
        }
        draw(ctx){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle=this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
            ctx.fill();
            ctx.restore();
        }
    }
    //实例化小球
    const ball=new Ball(100,'green');
    ball.x=width/2;
    ball.y=200;
    //实例化Tween 对象,为其添加目标对象
    let tween = new TWEEN.Tween(ball);
    //设置目标对象一段时间后的状态to({ key:val }, 时间长度)
    tween.to({color:'orange'}, 2000);
    //开始计时 start()
    tween.start();
    //重复 repeat(Infinity)
    tween.repeat(Infinity);
    //悠悠球 yoyo(true)
    tween.yoyo(true);
    //设置插值
    //Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, Bounce
    tween.easing(TWEEN.Easing.Bounce.Out);
    //事件监听
    //onUpdate,onStart,onStop,onComplete
    tween.onUpdate(function(){
        //console.log(this.x)
    });
    //渲染方法
    !(function render(){
        //更新目标目标对象的状态
        TWEEN.update();
        //擦除
        ctx.clearRect(0,0,width,height);
        //绘图
        ball.draw(ctx);
        //递归调用render 函数
        window.requestAnimationFrame(render);
    })()
</script>
</body>
</html>
帧动画，补间动画
jzj_nd的博客
08-12 964
帧动画，补间动画
补间动画详解一 基类Animation
ruancoder的博客
08-28 5488
补间动画（Tween animation）是通过在两个关键帧之间补充渐变的动画效果来实现的。 Android系统提供了四个补间动画的类，分别是AlphaAnimation、RotateAnimation、ScaleAnimation和TranslateAnimation，另外还有一个能够把多个动画组合起来的AnimationSet类，这些类都有一个共同的基类Animation。 Ani
补间动画实现（tween）
xia09222826的专栏
06-12 1973
1.补间动画的概念： 补间动画：只需要开发者设置好动画的开始与结束的关键帧 中间帧有喜用计算机补齐。 2.种类：分为4种： ①alpha 透明度 ②alpha 透明度 ③translate 位置移动 ④rotate 旋转动画 3.实现   ① Java代码实现    1）alpha 透明度 AlphaAnimation    设置动画的透明度开始与结束 设置持续的时间。    2
使用 补间动画(Tween Animation)
daozhongyang的专栏
10-17 1124
装载补间动画文件需要使用 android.view.animation.AnimatioUtils.loadAnimation(Context context,int id); id 表示 动画xml 文件的资源ID.假设在res\anim 目录下有一个动画文件test.xml ,装载test.xml 文件的代码如下: Animation animation = AnimationUtils.
【HTML实现烟花特效】
最新发布
m0_68422841的博客
06-14 372
title>烟花特效</title>
基于canvas的骨骼动画的示例代码
09-27
3. **自动补间**：骨骼动画引擎能够自动生成平滑的过渡动画，减少了手动制作每一帧的工作量。 4. **骨骼可控**：可以独立控制各个骨骼，实现复杂的动作组合。 5. **事件帧**：可以在特定动作或帧上添加事件，触发...
slik:动画补间库，非常适合与HTML5 canvas和或React一起使用
05-06
动画/补间库，非常适合与HTML5 canvas和/或React - 关于 Slik使用requestAnimationFrame随时间补间值。 您可以给它一个值，一个数组或一个对象。 在内部，Slik会将这些值转换为的值，并将补间的值作为ImmutableJS...
Android 补间动画（Animation）
04-13
补间动画的工作原理是通过在Canvas上追加Matrix来实现的。具体来说，在动画执行过程中，系统会根据指定的时间间隔更新视图的位置、旋转角度、缩放比例或透明度，从而产生动画效果。需要注意的是，这些Matrix变换不会...
HTML5新的东西：Canvas里面KineticJS补间动画教程！
fanyilins无厘头的html5心得
10-21 1748
与KineticJS到二层属性,我们可以实例化一个动力。二层对象,然后启动二层通过调用玩()。任何数值属性的一个形状、组层,或阶段可以转为,如 x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX, offsetX等等。 body { margin: 0p
Slik: 利用HTML5 Canvas和React实现动画补间
资源摘要信息:"Slik是一个动画补间库，特别适合于与HTML5 canvas和React框架一起使用。Slik利用requestAnimationFrame实现了动画的平滑时间补间，支持值、数组和对象类型的补间。它的内部实现依赖于ImmutableJS，这...
HTML Canvas创建一个图片浏览器
永无止境的专栏
02-09 4592
 HTML Canvas 介绍 HTML5 是目前正在讨论的新一代 HTML 标准，它代表了现在 Web 领域的最新的发展方向。在 HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证，视频和音频标签，网页元素的拖拽，离线存储，工作线程等等。当然，其中一个最令人激动的新特性就是新的标签类型 Canvas，开发人员可以通过该标签，在网页上直接用脚本进行绘图，产生各种
H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)
m0_67266787的博客
03-03 1647
目录 一、Konva 基本概念 二、Konva 的使用 1. 引入 Konva 2. Konva 基本绘制步骤 三、Konva 动画 1. tween 对象 2. 动画 to 方法的使用 3. 循环播放动画 四、案例：使用 Konva 绘制进度条 一、Konva 基本概念 Konva.js，全称适用于桌面/移动端应用的 HTML5 2d canvas 库，是一个HTML5 Canvas JavaScript 框架，它提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你
Android补间动画原理介绍
为码消得人憔悴
10-16 1365
一 简述 补间动画是Android诞生便支持的动画，也是App开发中最常用的动画，目前Android支持四种补间动画：位移（TranslateAnimation），旋转（RotateAnimation），缩放（ScaleAnimation）和透明（AlphaAnimation）。补间动画主要作用对象是Android的View。核心类的关系如下图所示： Animation是一个抽象类，...
使用canvas实现行走的小人动画
热门推荐
安静的对折的专栏
01-15 1万+
用canvas实现朝四个方向行走的小人，也可是使用键盘方向键操作行走的方向，其实就是用canvas不停的清除重画 canvas { border: 1px solid red; } 您的浏览器不支持canvas，请升级到最新的浏览器 var cas =
学习 PixiJS — 补间动画
weixin_33714884的博客
02-18 638
说明 补间动画指的是，我们可以通过为精灵的位置、比例、透明度，等属性，设置开始值和结束值，制作动画，动画中间需要的部分由软件自动计算填充。 Pixi 没有内置补间引擎，但是你可以使用很多很好的开源的补间库，比如 Tween.js 和 Dynamic.js 。如果要制作非常专业的自定义补间效果，可以使用这两个库中的其中一个。但是现在我们要使...
Android动画篇(七)—— 补间动画(Tween Animation)的运行原理
https://juejin.cn/user/1654096907477549/posts
06-06 1474
前言：不要在努力拼搏的年纪去选择安逸享乐，为了不让生活留下遗憾和后悔，我们要抓住一切改变生活的机会，生命不止，奋斗不息。 一、概述 在前面的文章中我们详细讲解了补间动画(Tween Animation)的使用，系统为我们封装了几个基本的动画，也就是ScaleAnimation(缩放)、AlphaAnimation(透明)、RotateAnimation(旋转)、TranslateAnima...
图形图像处理 补间 逐帧 属性动画 SurfaceView Bitmap
sinat_35073873的博客
11-05 750
package com.example.tyxiong.myapplication;import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Mat
canvas动画函数requestAnimationFrame
Jour的博客
08-26 9541
canvas原生动画函数requestAnimationFrame
使用canvas完成帧动画（方向键控制行走的小人）
qq_32849999的博客
09-04 3175
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; canvas { bord
深入解析：补间动画原理及示例代码
在HTML5中，可以使用Canvas API或者Web Animations API来创建补间动画；在Unity游戏引擎中，可以使用Animator组件和Animation Clip来实现。 ### 实质示例源码分析 由于示例源码文件名称为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值