若转帖请注明原出处,谢谢!
动画手册:http://ecd.tencent.com/css3/guide.html
室内导航路径动态画线 :
插件:https://github.com/camoconnell/lazy-line-painter
室内导航目前还不算成熟,但公司接到项目恰好有个很小的室内导航,为了使这个室内导航更具动态效果更显眼,要求路线是向用铅笔画线一样慢慢画出,研究了下上面的插件之后自己摘除了里面的一段code并加以改动了下实现了画线。
我是用的raphael.js 插件来做一些事情的,并且lazy-line-painter本身也是要依赖于raphael的
lazy-line-painter的部分原理(不一定很准确):比如在一张室内图片上有2点A 和 B,lazy-line-painter首先会画出A和B点之间的线Line_AB_1但是把这条线设为透明的,在视觉上根本看不到这条线,之后呢根据你所设的时间(即你设想总共画出这条线的时间)把这条线分为若干份,之后不断的画出一小份一小份的线,最后组成一条新的路径线路并把之前的那个线Line_AB_1删掉,接下来看代码
var draw = Raphael('map_navigation_container', 964, 893); var lineStr = "M498,467L512,452,L512,444L548,445L547,496L525,497L498,467"; var polyline = draw.path(lineStr).attr({ "stroke": "none","stroke-width": 0,"fill-opacity": 0}); print({ 'canvas': draw, 'pathstr': polyline, 'duration': 5000, 'attr': { "fill-opacity": 0, "stroke": "#000", "stroke-dasharray": null, "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-opacity": 1, "stroke-width": 3 }, 'callback': function () { } }, this); var print = function( settings, octx ) { var canvas = settings.canvas, duration = settings.duration, attr = settings.attr; var guide_path = settings.pathstr; var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr ), total_length = guide_path.getTotalLength( guide_path ), start_time = new Date().getTime(), interval_length = 25; var interval_id = setInterval( function() { var elapsed_time = new Date().getTime() - start_time, this_length = elapsed_time / duration * total_length, subpathstr = guide_path.getSubpath( 0, this_length ); attr.path = subpathstr; path.animate( attr, interval_length ); if ( elapsed_time >= duration ) { clearInterval( interval_id ); if (settings.callback !== undefined) { settings.callback(); } guide_path.remove(); } }, interval_length );
相关推荐
抛物线动画效果
这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果。该特效中,使用了3张波浪线条的png图片,以及少量的CSS代码,制作出逼真的线条波浪动画效果。
主要为大家详细介绍了WPF实现画线动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
仿美团、饿了么加入购物车抛物线动画效果,kotlin代码
加入购物车动画带抛物线效果,非常简单,你值得拥有!
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
Flutter实现添加购物车的抛物线动画效果,更加Tween动画利用了抛物线运动的算法求出path路径下每个坐标,然后canvas
Mapboxgl实现点animate动画效果
js加入购物车抛物线动画与购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入...
Qt的Widget属性动画,位移、缩放、不透明度动画等,可以通过组合实现复杂效果
Android 任意两点间的抛物线动画效果
这是一款酷炫绚丽的html5 canvas线条丝状波浪隧道动画效果,虽然实用性不强,但可以学习一下canvas的运用。
Android——贝塞尔曲线动画——直播平台点赞效果.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
NULL 博文链接:https://xiaying-hefei.iteye.com/blog/430531
插件描述:鼠标悬停在图片上,从两个角分别延伸出两条线 类似两条河流交汇的效果 。参考实例:http://www.jq22.com/jquery-info5585
曲线变直线PPT效果动画,直线变曲线PPT效果动画。
SVG图片波浪效果渲染动画 SVG图片波浪效果渲染动画 SVG图片波浪效果渲染动画 SVG图片波浪效果渲染动画
vue 及 react 实现 波浪小球动画效果。使用three.js 实现。可以跟随鼠标移动展示。
CAShapeLayer的简单使用,使用贝塞尔曲线创建圆形UI视图