SVG鸡蛋变形动画
SVG Egg Morph Animation
我想把一个简单的SVG路径变成另一个。我想使用JavaScript来控制何时发生这种情况。
下面是我创建的一个JSFiddle的链接,作为我尝试做的一个简化示例:http://jsfiddle.net/brentmitch/RqRjq/
下面是示例使用的基本代码:function makeEgg() {
var svgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgContainer.setAttribute("version", "1.1");
svgContainer.setAttribute("width", "142.308px");
svgContainer.setAttribute("height", "142.308px");
svgContainer.setAttribute("id", "curvecontainer");
svgContainer.setAttribute("x", "0px");
svgContainer.setAttribute("y", "0px");
var eggPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
eggPath.setAttribute("id", "eggpath");
eggPath.setAttribute("d", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z");
eggPath.setAttribute("fill", "GoldenRod");
svgContainer.appendChild(eggPath);
document.getElementById('svgcontainer').appendChild(svgContainer);
}
function changeToArrow() {
var animateEggPath = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
animateEggPath.setAttribute("id", "egganimation");
animateEggPath.setAttribute("xlink:href", "#eggpath");
animateEggPath.setAttribute("attributeType", "XML");
animateEggPath.setAttribute("attributeName", "d");
animateEggPath.setAttribute("from", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z");
animateEggPath.setAttribute("to", "M126.308,95.154c0,39.297-17.333-28.667-39.769-28.667S16,134.451,16,95.154S50,12,71.154,12 S126.308,55.856,126.308,95.154z");
animateEggPath.setAttribute("dur", "4s");
animateEggPath.setAttribute("fill", "freeze");
}
function resetToEgg() {
var animations = document.getElementById('egganimation');
document.getElementById('eggpath').removeChild(animations);
}
使用SVG,它生成一个鸡蛋,将其变形为一个箭头,然后通过删除动画节点来重置它。我遇到的问题是动画只在第一次工作。当我尝试重置它并再次运行它时,它不再动画了。它马上就变成了箭头。我必须重新加载/刷新浏览器窗口才能再次播放动画。
我知道Raphael JavaScript库对于这种类型的动画来说是很棒的,但我想做的只是一个简单的变形。我的访问者将主要使用移动设备,所以我想避免加载一个库只是为了做这一个简单的动画。
动画在时间轴上运行。动画时间基本上从0开始,然后当你运行动画时,它运行到4秒。当你删除和重新添加动画时,你不会重置时间轴,所以动画从4秒开始运行,这是结束点。你可以通过调用setCurrentTime来重新启动时间轴,像这样…
function resetToEgg() {
var animations = document.getElementById('egganimation');
document.getElementById('eggpath').removeChild(animations);
curvecontainer.setCurrentTime(0);
document.getElementById('arrowbutton').style.display = "inline";
document.getElementById('resetbutton').style.display = "none";
}
首先,代码有点乱,所以我没有花很多时间来检查每一行,如果我遗漏了一些重要的东西,我很抱歉。
因为你的初始函数makeEgg()
到changeToArrow()
我没有把它们放在一起。
我将resetToEgg()
的前两行修改为:
var animations = document.getElementById('egganimation');
document.getElementById('eggpath').removeChild(animations);
var animations = document.getElementById('curvecontainer');
document.getElementById('svgcontainer').removeChild(animations);
以便它删除svg元素。接下来,我添加了makeEgg();
,使鸡蛋复位
这是功能齐全的版本http://jsfiddle.net/berodam/hArrb/
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 为什么在变形之前不缺少Fx
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用jQuery在动画中期加速动画
- 设置动画时,SVG/Raphael大圆圈会变形
- 具有不更新阴影的变形属性的动画缓冲区几何图形
- Javascript-变形/动画svg路径数据没有SMIL或库
- 如何将自定义形状变形/设置动画为圆形?CANVAS JS
- 如何在three.js上创建带有滑块的变形动画?
- 拉斐尔弧线动画是变形的,而不是遵循弧线路径
- SVG鸡蛋变形动画
- 如何使用snap.svg设置路径变形的动画