css线条伸缩_Canvas 线条伸缩动画

最新推荐文章于 2021-08-04 01:22:20 发布
最新推荐文章于 2021-08-04 01:22:20 发布
阅读量277 收藏
点赞数
文章标签： css线条伸缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33603331/article/details/112045675
版权
本文介绍了如何使用JavaScript和Canvas创建线条伸缩动画。通过设置canvas尺寸，创建顶点和线条，利用 easing 函数更新线条位置，实现了线条的动态变化效果。文章详细展示了代码实现过程，包括线条和点的定义，以及各种缓动函数的应用。
摘要由CSDN通过智能技术生成

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// canvas settings

var viewWidth = 512,

viewHeight = 512,

canvas = document.getElementById("drawing_canvas"),

ctx,

timeStep = (1/60),

time = 0;

var vertices = [],

lines = [];

window.onload = function() {

initCanvas();

createLines();

requestAnimationFrame(loop);

};

function initCanvas() {

canvas.width = viewWidth;

canvas.height = viewHeight;

ctx = canvas.getContext('2d');

}

function createLines() {

var count = 256,

step = 4;

// create points

var phi = Math.PI * (3 - Math.sqrt(5)),

theta, r, x, y;

for (var i = 0; i < count; i+=step) {

theta = i * phi;

r = Math.sqrt(i) / Math.sqrt(count);

x = r * Math.cos(theta) * 196;

y = r * Math.sin(theta) * 196;

vertices.push(new Point(x, y));

}

// create lines

var start, end, color,

lineCount = (count / step) - 2;

for (var j = 1; j < lineCount; j++) {

start = vertices[j];

end = getNext(start, vertices);

color = 'hsl(' + Math.floor(j / lineCount * 360) + ',100%,50%)';

lines[j] = new Line(start, end, color, Ease.easeOutBack, Ease.easeOutCubic);

}

}

function update() {

lines.forEach(function(l) {

l.update();

if (l.complete) {

l.time = 0;

l.complete = false;

var temp = l.start;

l.start = l.end;

l.end = temp;

}

});

}

function draw() {

ctx.clearRect(0, 0, viewWidth, viewHeight);

ctx.save();

ctx.translate(256, 256);

ctx.rotate((time % 24) / 24 * Math.PI * 2);

ctx.lineWidth = 8;

ctx.lineCap = 'round';

ctx.lineJoin = 'round';

lines.forEach(function(l) {

l.draw();

});

ctx.restore();

}

function loop() {

update();

draw();

time += timeStep;

requestAnimationFrame(loop);

}

//

// Line and Point

//

function Line(p0, p1, color, ease0, ease1) {

this.start = p0;

this.end = p1;

this.p0 = new Point();

this.p1 = new Point();

this.color = color;

this.ease0 = ease0;

this.ease1 = ease1;

this.duration = 1;

this.complete = false;

}

Line.prototype = {

update:function() {

if (this.time + timeStep <= this.duration) {

this.time += timeStep;

}

else {

this.time = this.duration;

this.complete = true;

}

},

draw:function() {

var t0 = this.ease0(this.time, 0, 1, this.duration);

var t1 = this.ease1(this.time, 0, 1, this.duration);

lerp(this.start, this.end, t0, this.p0);

lerp(this.start, this.end, t1, this.p1);

ctx.strokeStyle = this.color;

ctx.beginPath();

ctx.moveTo(this.p0.x, this.p0.y);

ctx.lineTo(this.p1.x, this.p1.y);

ctx.stroke();

}

};

function Point(x, y) {

this.x = x || 0;

this.y = y || 0;

}

//

// utils

//

function lerp(p0, p1, t, tp) {

tp = tp || new Point();

tp.x = p0.x + t * (p1.x - p0.x);

tp.y = p0.y + t * (p1.y - p0.y);

return tp;

}

function getNext(item, array) {

var i = array.indexOf(item) + 1;

if (i === array.length) i = 0;

return array[i];

}

//

// EASING (functions from jQuery github)

//

Ease = {

easeInQuad: function (t, b, c, d) {

return c*(t/=d)*t + b;

},

easeOutQuad: function (t, b, c, d) {

return -c *(t/=d)*(t-2) + b;

},

easeInOutQuad: function (t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t + b;

return -c/2 * ((--t)*(t-2) - 1) + b;

},

easeInCubic: function (t, b, c, d) {

return c*(t/=d)*t*t + b;

},

easeOutCubic: function (t, b, c, d) {

return c*((t=t/d-1)*t*t + 1) + b;

},

easeInOutCubic: function (t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t + b;

return c/2*((t-=2)*t*t + 2) + b;

},

easeInQuart: function (t, b, c, d) {

return c*(t/=d)*t*t*t + b;

},

easeOutQuart: function (t, b, c, d) {

return -c * ((t=t/d-1)*t*t*t - 1) + b;

},

easeInOutQuart: function (t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t*t + b;

return -c/2 * ((t-=2)*t*t*t - 2) + b;

},

easeInQuint: function (t, b, c, d) {

return c*(t/=d)*t*t*t*t + b;

},

easeOutQuint: function (t, b, c, d) {

return c*((t=t/d-1)*t*t*t*t + 1) + b;

},

easeInOutQuint: function (t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

return c/2*((t-=2)*t*t*t*t + 2) + b;

},

easeInSine: function (t, b, c, d) {

return -c * Math.cos(t/d * (Math.PI/2)) + c + b;

},

easeOutSine: function (t, b, c, d) {

return c * Math.sin(t/d * (Math.PI/2)) + b;

},

easeInOutSine: function (t, b, c, d) {

return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;

},

easeInExpo: function (t, b, c, d) {

return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;

},

easeOutExpo: function (t, b, c, d) {

return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;

},

easeInOutExpo: function (t, b, c, d) {

if (t==0) return b;

if (t==d) return b+c;

if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;

return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;

},

easeInCirc: function (t, b, c, d) {

return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;

},

easeOutCirc: function (t, b, c, d) {

return c * Math.sqrt(1 - (t=t/d-1)*t) + b;

},

easeInOutCirc: function (t, b, c, d) {

if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;

return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;

},

easeInElastic: function (t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

},

easeOutElastic: function (t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

},

easeInOutElastic: function (t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

},

easeInBack: function (t, b, c, d, s) {

if (s == undefined) s = 1.70158;

return c*(t/=d)*t*((s+1)*t - s) + b;

},

easeOutBack: function (t, b, c, d, s) {

if (s == undefined) s = 1.70158;

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

},

easeInOutBack: function (t, b, c, d, s) {

if (s == undefined) s = 1.70158;

if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

},

easeInBounce: function (t, b, c, d) {

return c - Ease.easeOutBounce (d-t, 0, c, d) + b;

},

easeOutBounce: function (t, b, c, d) {

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

} else {

return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

}

},

easeInOutBounce: function (t, b, c, d) {

if (t < d/2) return Ease.easeInBounce (t*2, 0, c, d) * .5 + b;

return Ease.easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;

}

};

储颖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于动画：JavaScript动画、CSS动画、图层处理、HTML5的canvas及层叠上下文
hhhh
04-27 756
CSS动画相对于早期的JavaScript动画有很多的性能提升 CSS图层 浏览器会把页面切分为多个图层，每个图层有一个或多个节点，在渲染DOM的时候，浏览器实际的工作 获取DOM后分割为多个图层 对每个图层的节点计算样式结果 为每个节点生成图形和位置 在图层位图中绘制每个节点 图层作为纹理上传至GPU 复合多个图层至页面 每个图层中元素尺寸变化都会影响到别的元素 CSS通过transform位移、scale伸缩、rotate旋转、skew倾斜、matrix矩阵转换、perspective透视图提供
css3 HTML5 Canvas炫酷3D线条延伸动画特效.zip
07-11
js代码 [removed] ;(function() { 'use strict'; var c = document.getElementById('c'); var ctx = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var fl = 1000; function prj(obj) { var cz = obj.z fl; if(cz === 0) return; var scl = fl / cz; obj.p.x = cx obj.x * scl; obj.p.y = cy obj.y * scl; obj.s = scl; } var P = function(x, y, z) { this.x = x; this.y = y; this.z = z; this.s = 1; this.cl = 0; this.p = { x: 0, y: 0 }; }; P.prototype = { constructor: P, update: function() { this.z -= 30; }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = 'hsla(' this.cl ', 100%, 50%, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; var M = function(x, y, z) { this.list = []; this.max = 100; this.x = x; this.y = y; this.z = z; this.s = 1; this.p = { x: 0, y: 0 }; this.ax = Math.random() * (Math.PI * 2); this.ay = Math.random() * (Math.PI * 2); this.rx = Math.random() * 100; this.ry = Math.random() * 100; this.cl = Math.random() * 360; this.cls = Math.random(); }; M.prototype = { constructor: M, update: function() { this.cl = this.cls; this.ax = Math.random() * 0.1 - 0.02; this.ay = Math.random() * 0.1 - 0.02; this.x = Math.cos(this.ax) * 100; this.y = Math.sin(this.ay) * 100; this.z = 10; if(this.z > fl) this.z = fl; if(this.list.length < this.max) { if(Math.random() * 100 < 50) { var pp = new P(this.x, this.y, this.z); pp.cl = this.cl; this.list.push(pp); } } else { var pp = this.list.shift(); pp.x = this.x; pp.y = this.y; pp.z = this.z; pp.cl = this.cl; this.list.push(pp); } }, render: function(ctx) { if(this.z <= -fl) return; ctx.save(); ctx.translate(this.p.x, this.p.y); ctx.fillStyle = 'green'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } }; function update(mv, list) { for(var i = 0; i < list.length; i ) { var p = list[i]; p.update(); prj(p); p.render(ctx); } for(var i = list.length-1; i >= 0; i--) { var p = list[i]; if(p.z <= -fl) continue; if(i === list.length - 1) { ctx.lineWidth = Math.random(); ctx.strokeStyle = 'hsl(' mv.cl ', 100%, 50%)'; ctx.beginPath(); ctx.moveTo(p.p.x, p.p.y); } else { ctx.lineTo(p.p.x, p.p.y); } } ctx.stroke(); } var ms = []; for(var i = 0; i < 10; i ) { ms.push(new M( Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200)); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for(var i = 0; i < ms.length; i ) { var m = ms[i]; m.update(); prj(m); update(m, m.list); } }); })(); [removed] 这是一款基于HTML5 Canvas绘制的炫酷3D线条延伸动画特效，多彩颜色变幻，非常漂亮！
canvas之伸缩变换
扫地僧
08-03 348
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放案例</title> <style> canvas { border: 1px solid
css3 动画 线两边延长,CSS 导航栏下滑线向两边延伸动画
weixin_39804523的博客
08-04 1151
方法一:原理利用元素向左移动的同时，宽度变长，实现两边延伸效果。* {margin: 0;padding: 0;list-style: none; }body, html {width: 100%;height: 100%; }ul {width: 20%;height: 25px;margin: 100px auto;font-size: 0; }ul > li {display: inl...
html 延长直线,利用HTML5实现绘制3D线条延伸动画特效
weixin_42621217的博客
05-30 708
特效描述：利用HTML5实现 绘制3D 线条延伸 动画特效。利用HTML5实现雷达地区扫描动画特效代码结构1. HTML代码;(function() {'use strict';var c = document.getElementById('c');var ctx = c.getContext('2d');var w = c.width = window.innerWidth;var h = c...
Canvas线条动画
weixin_45820444的博客
09-03 7631
Canvas线条动画  简单的Canvas动画，代码只有71行，试试吧！没有谁天生就会，用这个动画，做为你的Canvas小结。 如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery.js"></script> <title&gt
CSS3 3D伸缩线条球体动画特效.zip
11-16
"CSS3 3D伸缩线条球体动画特效"这个标题揭示了我们关注的核心技术——CSS3的3D变换和动画效果。在这个项目中，开发者使用CSS3来创建一个动态的、具有3D视觉的线条球体，并通过伸缩动作增加其吸引力和动态感。这种...
商务企业网站CSS模板46_企业 简单 黑色 线条 灰色 窄_html网站模板_网页源码移动端前端_H5模板_自适应响.rar
08-06
这款模板以其简洁、黑色、线条元素、灰色调以及窄版设计为主要特征，旨在提供一种专业且现代的在线展示平台。模板不仅适用于桌面端，还支持移动端前端，实现了H5响应式设计，能够自动适配不同设备的屏幕尺寸，确保在...
additional_page_2.rar_css_h5_page
09-15
6. **动画和过渡**：`@keyframes`定义动画，`transition`实现元素状态改变时的平滑过渡。 7. **CSS预处理器**：如Sass或Less，可以编写更易维护的CSS代码，如变量、嵌套规则、混合等。 8. **BEM（Block Element ...
紫色简洁的个人博客CSS模板4797_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar
08-06
在这个个人博客模板中，JavaScript可能用于实现导航菜单的响应式行为、图片轮播、滚动动画等交互功能。 4. **移动端前端**：随着移动设备的普及，前端开发需要考虑到不同屏幕尺寸和设备类型。移动端前端设计是指为...
canvas绘制的直线动画
08-31
本文主要分享了canvas绘制的直线动画的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
css线条伸缩_伸缩布局(CSS3)
weixin_39758696的博客
12-21 200
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换。Flex布局的语法规范经过几年发生了很大...
神奇的canvas——点与线绘制的绚丽动画效果
weixin_34313182的博客
03-05 1609
代码地址如下：http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果，虽然组成的元素很简单，只有点和线，但是视觉效果却非常炫丽，当下就非常想自己把他实现一遍。因为工作原因这个想法搁置了一段时间，前不久忽然想起来，就抽空完成了这个demo，下面是demo的截图，想要看动态效果的小伙伴可以戳旁边的链接：canvas...
canvas画圆和线条动画
daily886的博客
11-30 1429
canvas画圆和线条动画             *{             margin:0;             padding:0;         }         html,body{             width:100%;             height:100%;         }         #canvas{          
html5画布直线运动,《每周一点canvas动画》——波形运动
weixin_31159439的博客
06-01 339
在上一节我们介绍了canvas动画中有关三角函数的内容，以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括：平滑运动线性运动脉冲运动1.Sin函数的波形sin函数的波形想必骚年们不会感到陌生，其图形如下所示：如果想要取得sin函数在[0, 2π]之间的值，非连续的情况下，可以这样估算。for(var angle=0; angleconsole.log(Math.sin(angl...
自定义View中canvas的宽高和View的宽高关系
lanseyuanwei2的博客
01-06 1616
经测试，onDraw方法中通过canvas.getWidth和canvas.getHeight得到的宽高和View的宽高一致 并不是某些博客中说的和屏幕宽高一致
html显示区域 动画,HTML5 Canvas笔记——利用剪辑区域来制作伸缩式动画
weixin_35578119的博客
06-10 112
剪辑区域来制作伸缩式动画利用剪辑区域来制作伸缩式动画#canvas{border:1px solid cornflowerblue;position: absolute;left:150px;top: 10px;background: #EEEEEE;border: thin solid #aaa;cursor: pointer;box-shadow: rgba(200,200,255,0.9) ...
canvas.width和canvas.style.width区别以及应用
weixin_33901926的博客
10-26 2150
今天讲的内容是canvas.width和canvas.style.width的区别，在没有做canvas项目之前，其实我是并没有深入了解过这两个属性的，最近在研究canvas项目的自适应问题，尤其是在canvas中置入图片，碰到了图片模糊的问题，这些“杂症”都是和文章要讲的canvas.width/canvas.style.width有关...
【基础知识】HTML5 Canvas设置Canvas元素width和height的两种不同方式（图文）
苏一恒
08-07 4239
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 目录 设置Canvas元素width和height的两种不同方式 方式1:通过CSS设置： 方式2:通过canvas标签...
uniapp伸缩侧边栏
最新发布
06-07
关于UniApp的伸缩侧边栏（Slidable Sidebar或Off-canvas menu），这是一种常见的交互设计模式，常用于移动应用中，特别是在需要显示或隐藏内容区域的时候，比如导航菜单。 在UniApp中，你可以通过内置的`u-nav`组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值