动画原理——脉动(膨胀缩小)&&无规则运动
书籍名称:HTML5-Animation-with-JavaScript
书籍源码:https://github.com/lamberta/html5-animation
1.脉动是一种半径r来回反复的运动,在canvas中他是对原图形的方法和缩小。可以将sin应用在控制大小的属性scaleX,scaleY。
以下代码在先前的实例中对index.html的进行修改即可。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pulse</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas> <script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angle = 0,
centerScale = 1,
range = 0.5,
speed = 0.05; ball.x = canvas.width / 2;
ball.y = canvas.height / 2; (function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
//利用正弦设置放大的倍数
ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
angle += speed;
ball.draw(context);
}());
};
</script>
</body>
</html>
2.对球体的位置x,y分别用一个sin函数来表示,且角度递增的速度不一样,可以实现无规则运动,代码如下
仍然只是index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Random</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas> <script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angleX = 0,
angleY = 0,
range = 50,
centerX = canvas.width / 2,
centerY = canvas.height / 2,
xspeed = 0.07,
yspeed = 0.11; (function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height); ball.x = centerX + Math.sin(angleX) * range;
ball.y = centerY + Math.sin(angleY) * range;
angleX += xspeed;
angleY += yspeed;
ball.draw(context);
}());
};
</script>
</body>
</html>
动画原理——脉动(膨胀缩小)&&无规则运动的更多相关文章
- Atitit 视频编码与动画原理attilax总结
Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...
- SVG描边动画原理
SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...
- JS实现动画原理一(闭包方式)
前提: 你必须了解js的闭包(否则你看不懂滴) 我们就来做一个js实现jq animate的动画效果来简单探索一下,js动画实现的简单原理: html代码 <div id=&q ...
- iOS动画原理
1. iOS动画原理 本质:动画对象(这里是UIView)的状态,基于时间变化的反应 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属 ...
- Unity3D 骨骼动画原理学习笔记
最近研究了一下游戏中模型的骨骼动画的原理,做一个学习笔记,便于大家共同学习探讨. ps:最近改bug改的要死要活,博客写的吭哧吭哧的~ 首先列出学习参考的前人的文章,本文较多的参考了其中的表述: 1. ...
- JS 实现无缝滚动动画原理(初学者入)
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- OpenGL10-骨骼动画原理篇(3)-Shader版本代码已经上传
视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 接上一个例程OpenGL10-骨骼动画原理篇(2),对骨骼动画 ...
- OpenGL10-骨骼动画原理篇(2)
接上一篇的内容,上一篇,简单的介绍了,骨骼动画的原理,给出来一个 简单的例程,这一例程将给展示一个最初级的人物动画,具备多细节内容 以人走路为例子,当人走路的从一个站立开始,到迈出一步,这个过程是 一 ...
- js中动画原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
随机推荐
- JqueryeasyUI选项卡选择判定更改内部Iframe地址
1.tabs的常用操作 //1.判断tab是否存在. var currtab = $('#tabs').tabs('getSelected'); //2.判断点击的tab是否是当前选中的tab. va ...
- [Leetcode][Python]45: Jump Game II
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 45: Jump Game IIhttps://oj.leetcode.com ...
- linux之SQL语句简明教程---HAVING
那我们如何对函数产生的值来设定条件呢?举例来说,我们可能只需要知道哪些店的营业额有超过 $1,500.在这个情况下,我们不能使用 WHERE 的指令.那要怎么办呢?很幸运地,SQL 有提供一个 HAV ...
- 彩虹vpn免费10分钟
账号:rainbowvpn password:10fenzhong server地址:t.chqvpn.com l2tp密钥:123456
- 为什么VS提示SurfFeatureDetector不是cv的成员函数
surf和sift算法都是在头文件#include <opencv2/features2d/features2d.hpp>中,但在新的opencv版本出来后,如果仍然使用这个头文件就会出现 ...
- C++ STL源代码学习(map,set内部heap篇)
stl_heap.h ///STL中使用的是大顶堆 /// Heap-manipulation functions: push_heap, pop_heap, make_heap, sort_heap ...
- Ubuntu12.04下jamvm1.5.4+classpath-0.98成功执行 helloworld.class
经过两天的努力,总于在ubuntu以下编译好classpath-0.98与jamvm1.5.4,并能成功的运行类文件:jamvm hellowold,当屏幕上打印出"hello world! ...
- ORACLE 热备begin backup / end backup
执行begin backup之后,oracle会把将要备份的数据文件都标记为hot-backup-in-progress,锁定所要备份的datafile header的scn,例如此时scn=100, ...
- 从头开始-04.C语言中流程控制
分支结构: if语句:当条表达式满足的时候就执行if后面大括号中语句 三种格式: if,if else , if else if else 特点:1.只有一个代码块会被执行 2.若有else那么必有一 ...
- Android Studio无法关联Api23源码-提示Souces for android api 23 platform not found
最近升级了As,然后忽然就关联不上源码了,很不方便,找个Activity的源码都只有outline没有解释,还提示这个错误: Decompiled .class file, bytecode vers ...