在视口中动画SVG元素
Animating SVG element on viewport
我的问题与我之前的问题有关
我试图找出如何触发viewport Javascript上的内部SVG元素类。您可以在这里看到示例:http://codepen.io/anon/pen/Afqza
<div style="height: 400px;"></div>
<svg version="1.1" id="lock" xmlns="http://www.w3.org/2000/svg" width="85px" height="85px" viewBox="0 0 103 103" ><g><g><g><g><circle style="fill:#E84849;" cx="51.5" cy="51.501" r="51.125"/></g></g></g></g><g><g><g class="shackle"><path style="fill:#CFC7BE;" d="M78.345,46.518c0-14.869-11.813-28.387-26.386-28.387c-14.573,0-26.386,13.518-26.386,28.387h6.829c0-11.021,8.756-21.419,19.557-21.419s19.557,10.398,19.557,21.419H78.345z"/><path style="fill:#E8E7E7;" d="M61.385,20.101v7.816c3.039,1.927,5.583,4.717,7.362,7.975V24.879C66.562,22.886,64.076,21.26,61.385,20.101z"/></g><g><path style="fill:#F4E028;" d="M78.358,79.801c0,3.116-2.579,5.642-5.765,5.642H31.281c-3.186,0-5.764-2.525-5.764-5.642V46.419c0-3.116,52.841-3.116,52.841,0V79.801z"/></g><g><path style="fill:#DAC425;" d="M58.047,59.944c0-3.253-2.638-5.89-5.889-5.89c-3.253,0-5.889,2.637-5.889,5.89c0,2.481,1.536,4.599,3.705,5.468v5.431c0,1.151,0.935,2.084,2.085,2.084c1.153,0,2.086-0.933,2.086-2.084v-5.36C56.418,64.666,58.047,62.498,58.047,59.944z"/></g><g><path style="fill:#D0B82B;" d="M46.048,59.944c0-3.253,2.637-5.89,5.891-5.89c0,0-4.105,2.737-4.105,5.99c0,3.312,3.097,5.276,3.097,5.276v5.581c0,1.153,1.104,2.024,1.104,2.024c-1.15,0-2.085-0.933-2.085-2.084v-5.36C47.677,64.666,46.048,62.498,46.048,59.944z"/></g></g><g><polygon style="fill:#F8E349;" points="68.747,85.442 61.385,85.442 61.385,44.219 68.747,44.585 "/></g></g></svg>
.shackle {
animation-name: open;
-webkit-animation-name: open;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform-origin: bottom left;
}
@keyframes open {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes open {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(-10deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
var onAppear = [];
document.addEventListener("DOMContentLoaded", function() {
onAppear = [].map.call(document.querySelectorAll("#lock"), function(item ) {
return item;
});
}, false);
window.addEventListener("scroll", function() {
onAppear.forEach(function(elem) {
var vwTop = window.pageYOffset;
var vwBottom = (window.pageYOffset + window.innerHeight);
var elemTop = elem.offsetTop;
var elemHeight = elem.offsetHeight;
if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
elem.classList.add("shackle");
} else {
elem.classList.remove("shackle");
}
});
}, false);
当前整个挂锁动画,而不是我想动画的枷锁。一定是什么简单的东西,但我想不出来。
问题是你没有将动画类应用于shackle元素,而是将其应用于lock
元素。
因为你在玩CSS3和SVG,我可以假设你不需要适应IE7及以下版本。因此,我们可以假设使用JS的querySelector
方法是安全的。
-
首先,我们将更新样式定义,以表明该类是用于动画定义的(并且将其与我们将用于选择它的shackle元素上的类分开)。
在CSS中将。shackle更改为。animshackle
-
第二,我们需要更新滚动事件监听器,以便在提供的元素中搜索
.shackle
类元素,然后将动画类应用于该元素。更新JS
JS
window.addEventListener("scroll", function() {
onAppear.forEach(function(elem) {
var vwTop = window.pageYOffset;
var vwBottom = (window.pageYOffset + window.innerHeight);
var elemTop = elem.offsetTop;
var elemHeight = elem.offsetHeight;
var shackle = elem.querySelector('.shackle');
if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
shackle.classList.add("animShackle");
} else {
shackle.classList.remove("animShackle");
}
});
}, false);
为了使代码更易于扩展,以满足附加元素的动画需求,我们需要更改一些变量名,使它们更通用,并更新获取和设置动画类的方式。
为动画SVG添加一个通用类,这样我们就可以在onAppear函数中找到它们
add class
animatedSVG
更新querySelectorAll
方法使用新类而不是单个id
更新SVG中动画元素的类名,以便我们可以在scroll
onAppear.forEach
方法中访问它更新类
.shackle
到.animatedElement
在HTML更新elem.querySelector
方法使用新类而不是非泛型.shackle
使用SVG的
id
属性为动画创建一个类名添加一个名为
animationClass
的新变量,该变量由SVGid
制作,并带有' animm '前缀
HTML现在需要以下三样东西:
- SVG的
id
属性 -
class="animatedSVG"
on SVG -
class="animatedElement"
在SVG中的元素,你希望动画
更新JS
var onAppear = [];
document.addEventListener("DOMContentLoaded", function() {
onAppear = [].map.call(document.querySelectorAll(".animatedSVG"), function(item) {
return item;
});
}, false);
window.addEventListener("scroll", function() {
onAppear.forEach(function(elem) {
var vwTop = window.pageYOffset;
var vwBottom = (window.pageYOffset + window.innerHeight);
var elemTop = elem.offsetTop;
var elemHeight = elem.offsetHeight;
var animatedElem = elem.querySelector('.animatedElement');
var animationClass = 'anim'+elem.id;
if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
animatedElem.classList.add(animationClass);
} else {
animatedElem.classList.remove(animationClass);
}
});
}, false);
- 如何自动保存动态生成的HTML SVG元素
- 将包含SVG元素的HTML转换为图像文件
- SVG元素——处理和选择文本
- SVG元素在转换后会丢失事件侦听器
- 获取以屏幕像素为单位的旋转SVG元素的边界
- 使用JavaScript查找具有特定属性的SVG元素
- 如何使用正则表达式按类获取svg元素
- 将SVG元素拖动到另一个SVG元素上
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 如何在svg元素上添加和删除css类
- 在模式框打开之前更改 SVG 元素的颜色,并在框打开时保持该颜色
- 将复杂的 SVG 元素追加到选区
- 使用 JQuery 对 Spin SVG 元素进行动画处理
- 检查直线是否与带有 SVG 元素的圆相交
- 如何添加效果,以便将鼠标悬停在 SVG 元素上使其变大
- 如何将运动模糊尾巴添加到圆圈中的 svg 元素
- SVG 元素作为容器
- 从上传的文件中获取svg元素的宽度
- 是否可以用D3将svg元素添加到开放层映射中
- 单击时将SVG元素替换为另一个