[svg实现曲线动画相关][animate标签使用]

mssjtxwd 2015-08-14 12:38:04

是这样的，LZ想实现一个类似于http://bl.ocks.org/mbostock/4060954 这样的一个demo，其中曲线绘制LZ通过插值后绘制svg的path得到，但是demo中的update(即d3中的tranlate()方法) LZ不知道应该如何实现……LZ目前只会用animate标签完成一次从一个状态到另一个状态的有动画的更新，那第二次更新应该怎么做呢……如果再插入一个animate的话会中间不会出现动画，而是直接变成第二次更新完成后的曲线……

...全文

145 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

香蕉猪 2015-08-19

打赏
举报

回复

第二次更新，，在现有状态上，让animate走回初始状态就好了。。。。例如进入时候Height=300,第一次动画设置Height=50,第二次动画就设置Height=300就可以了。。

DaveLeeCN 2015-08-14

打赏
举报

回复

d3里面的动画是通过 transition方法来设置，该方法支持在两种状态之间动画切换，就想demo里面的update按钮一样，不过多状态的貌似没有定义，反正个多状态切换我直接重画的，没有动画效果

mssjtxwd 2015-08-14

打赏
举报

回复

引用 1 楼 DaveLeeCN 的回复:

d3里面的动画是通过 transition方法来设置，该方法支持在两种状态之间动画切换，就想demo里面的update按钮一样，不过多状态的貌似没有定义，反正个多状态切换我直接重画的，没有动画效果

呃，其实我就是想知道translition方法应该大概怎么实现……

Saola Animate是一款能够制作HTML5动画软件，帮助你快速地创建适用于多种设备情景的HTML5动画，Saola Animate拥有非常直观的编辑器，就算你对代码不熟悉，也可以制作HTML5动画！ Saola Animate软件特色 1、时间线时间线充当动画的容器和衡量时间的统治者。每个场景可以有多个时间线来满足大量元素，动画和交互性。控制时间线回放以创建丰富的交互式动画。 2、场景在Microsoft PowerPoint中将场景想象成幻灯片。管理场景来控制动画的流动，创造惊人的视觉体验。 3、精灵表精灵表是一个排列在一个位图图像文件中的各种图形的序列。由于精灵表，你可以创建一个动画人物代表一个或几个动画序列，而只需要加载一个文件。 4、自动关键帧自动关键帧允许在创建动画时自动生成关键帧。因此，它使关键帧更容易，并缩短了你放入动画的时间。 5、运动路径运动路径是创造运动的最佳主意。它可以让你绘制复杂的曲线，而不仅仅是一条直线，动画你的物体更自然地移动。 6、缓和方法放宽指定了一段时间内转换的速度。多达40种的缓解方法，让您的动画更加震撼和自然。 7、形状和SVG Saola Animate在您的指尖放置各种各样的预设形状。此外，还支持导入SVG，以便在动画中重复使用任何现有的矢量图形设计。 8、互动交互性是获得和保持受众的注意力和兴趣的好方法，因为它使他们能够体验交互式控制。通过添加操作和触发器来响应事件，例如鼠标点击或按键，来吸引观众。 9、灵活的布局 Saola Animate支持灵活的布局，即文档大小适应浏览器窗口大小。灵活的布局可让您的动画在任何设备和浏览器上完美运行。 10、脚本支持当你想做自己的互动时，JavaScript派上用场。Saola Animate拥有强大的内置代码编辑器和智能功能，让您快速创建和编辑JS功能。JavaScript API也可以随时为您提供支持。 11、HTML5 通过动态的，互动的，引人入胜的网页内容将您的想法变为现实。HTML5及其广泛的功能使您能够将自己的设想变为现实，并且无需高级动画和交互功能。 12、符号使用符号在场景或同一场景的不同位置共享相同的元素，场景，时间线和动画。 Saola Animate截图

SVGo：用于SVG生成的Go库该库生成可缩放矢量图形1.1规范（）定义的SVG。输出进入指定的io.Writer。支持的SVG元素和功能形状，线条，文字圆，椭圆，多边形，折线，矩形（包括圆角矩形），线，文本路径一般，弧形，三次和二次贝塞尔曲线路径，图像和渐变图片，linearGradient，radialGradient，变身平移，旋转，缩放，倾斜X，倾斜Y 动画 animate，animateMotion，animateTranslate，animateRotate，animateScale，animateSkewX，animateSkewY 滤镜效果过滤器，f

gensvg：用于SVG生成的Go库该库生成可缩放矢量图形1.1规范（）定义的SVG。输出进入指定的io.Writer。支持的SVG元素和功能形状，线条，文字圆，椭圆，多边形，折线，矩形（包括圆角矩形），线，文本，tspan 路径一般，弧形，三次和二次贝塞尔曲线路径，图像和渐变图片，linearGradient，radialGradient，变身平移，旋转，缩放，倾斜X，倾斜Y 动画片 animate，animateMotion，animateTranslate，animateRotate，animateScale，animateSkewX，animateSkewY 滤镜效果过滤器，feBlend，feColorMatrix，feColorMatrix，feComponentTransfer，feComposite，feConvolveMatrix，feDiffu

React移动用于React的精美，数据驱动的动画。只需3.5kb（压缩）！产品特点动画HTML，SVG和React-Native 细粒度控制延迟，持续时间和缓动动画生命周期事件：开始，中断，结束自定义补间功能很棒的文档和许多示例支持TypeScript 安装 // React ^16.3.0 npm install react-move // React ^0.14.9 || ^15.3.0 || ^16.0.0 npm install react-move@^5.0.0 注意： React Move 5.x和6.x的API完全相同。 5.x版本仅包含以使该库与React

1.animate 动画，放到闭合的曲线内，定义某个属性按时间发生变化例如： <circle cx="200" cy="200" r="50" stroke...

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章