canvas实现折现随机变化的动画效果

最新推荐文章于 2022-08-11 13:25:12 发布

luochao_tj

最新推荐文章于 2022-08-11 13:25:12 发布

阅读量1.8k

点赞数

文章标签：动画 canvas javascript

本文链接：https://blog.csdn.net/luochao_tj/article/details/41130345

版权

在项目前期预研中（设计阶段）设计师想要一个折现集随机缓动的效果，于是就用canvas尝试做了下。

1、集成了js常见的缓动函数公式，放在Easing对象下；

2、对给定的点集及目标点集做随机前往，过程使用动画方式。

好了，不多说，附件中有net.js（封装了简单的类），及index.html示例代码。

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{overflow: hidden;}
</style>
</head>
<body>
<canvas id="target"></canvas>
<script type="text/javascript" src="net.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(e){
var s_width = window.innerWidth;
var s_height = window.innerHeight;

var canvas = document.getElementById('target');
canvas.setAttribute('width',s_width);
canvas.setAttribute('height',s_height);

var ctx = canvas.getContext('2d');
//一组以一个顶点发出的射线
var group = [
{
points : [
{
x : 100,
y : s_height
},
{
x : 400,
y : s_height
},
{
x : 800,
y : s