javascript - 使用 SMIL 制作 SVG 动画-6ren

javascript - 使用 SMIL 制作 SVG 动画

转载作者：行者123 更新时间：2023-11-30 06:02:44

25

4

我正在尝试使用 SVG 为视频元素创建 UI。我正在寻找一个简单的解决方案来为控制栏设置动画，当鼠标在其中时(如 YouTube)，我想从窗口底部升起。

这是我想做的:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 640 360" preserveAspectRatio="none" version="1.1">
  <g id="control_bar" transform="translate(0,360)">
    <animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseover" from="0,360" to="0,328" dur="350ms" fill="freeze"/>
    <animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseout" from="0,328" to="0,360" dur="350ms" fill="freeze"/>
    <rect x="0" y="0" width="640" height="32" fill="grey"/>
  </g>
</svg>

不幸的是，window.mouseover 没有做任何事情。相反，我创建了一个透明矩形来覆盖整个窗口，并给它一个 id="screen"并使用 begin="screen.mouseover"等。当鼠标在窗口中时，控制栏确实像我想要的那样动画，但不幸的是，screen 阻止了它下面的所有元素获得它们自己的鼠标事件。

我正在寻找最简单的方法来完成此任务，最好只使用标记 (SMIL)，因为我想避免使用大量的 JavaScript 或库。

谢谢!

>>>编辑<<< 澄清我想要的是什么:

我想为 HTML5

25

4

0

文章推荐： java - 使用 netbeans GUI 构建器 JSlider 放大 JLabel 图标

文章推荐： java - 在 jfilechooser 中包含图像缩略图

文章推荐： java - 务实地允许用户选择要运行的 JUnit 测试类

文章推荐： javascript - 如何从 Internet Explorer DOM 调用 javascript

smil - SMIL 是死了，还是可能只是渴望峡湾？
SMIL ( Synchronized Multimedia Integration Language ) 对于现代应用程序来说已经死了吗？是否有替代它的用于组合媒体的标准化格式？最佳答案从缺乏
html - SMIL 中的动画
有人有学习 SMIL 动画的资源吗？最佳答案这些应该让你继续: W3Schools SVG Reference Hefty tutorial连同 66 page PDF tutorial Anim
SVG SMIL animateTransform 缓动
我正在尝试向简单的 SVG SMIL 动画添加计时功能。显然可以使用 keySplines 设置时间/缓动属性，但是在我的示例中它不起作用:
svg - 有没有另一种方法可以在不使用 SMIL 的情况下制作动画路径或多边形
SMIL is deprecated and not going to work on chrome anymore 我刚开始学习如何制作动画 svg，我偶然发现了这个声明。我不知道这是不是真的(我希
SVG SMIL 路径动画在 Safari 中不起作用
我使用 SVG SMIL 动画是因为我还没有找到另一种方法来制作曲线形状的动画。这种方法适用于除 iOS 浏览器之外的所有浏览器。这是我的 SVG 代码: .st0{fill:rgba(
svg - 使用 SMIL 链接两个
我试图在我的 SVG 中让两个动画相继运行。这就是它们的写入方式。它们被写入一个组，里面有一些原语。我正在尝试让整个组旋转然后平移。但是当我运行这个时，变换似乎在第一个动画结束时重置
animation - 什么是纯 SVG，什么是 SMIL？
上下文:我正在使用 SVG 制作信息图。我希望借助动画，尤其是通过链接动画，让文档变得栩栩如生。我已经熟悉 SVG，但最近才开始学习 SVG 动画。由于 SMIL 已被弃用，我正在尝试用纯 SVG
javascript - SMIL 动画在动态加载的外部 SVG 上失败
我创建了一个包含超过 3000 条路径的怪物动画 SVG 文件。每个路径都使用声明性 SMIL 动画独立地进行动画处理。它在所有新浏览器中播放缓慢但精美，为 IE9 使用一点 js 回退。 (我会发布
javascript - SVG SMIL animateMotion 只触发一次
我有一张布拉格机场航类目的地的 SVG map 。我想沿着通往这些机场中的每一个的路径制作一个圆圈。获取代码here (对此感到抱歉，不适用于 jsfiddle)。处理“飞行”动画的代码如下所示:
css - SMIL 动画不在 Mouseout 上结束
我正在尝试制作一个 SVG 图标，该图标在悬停时使用 SMIL 进行动画处理(好吧，我不在乎它是 SMIL 还是 CSS，我只是不想使用 JS)并且我已经走了很远但是我遇到了一个无法在网上找到答案甚至
html - SVG/SMIL 回流/重绘的性能影响？
过去我在 javascript 方面做过很多工作，包括一些 DOM 操作。从那里我了解到回流/重绘在某些情况下可能是一个很大的性能问题，并且通常应该限制在最低限度。例如，当添加一组 div 时，您应该
linux - 从 SMIL 文件中提取 jpeg
我需要我的 perl 脚本从 SMIL 文件中提取 jpeg。我看到在 linux 中执行此操作的唯一方法是使用以下命令。 xxd -c1 -p wapenc\?T\=mavodi-6-13b-1f-
html - SMIL(同步多媒体集成语言)的 future ？
SMIL(同步多媒体集成语言)最后一次更新是在 2008 年，有谁知道在同步多媒体文件时是否有更好的协议(protocol)可遵循？最佳答案 SMIL 没有天然的竞争对手，因此任何其他解决方案都将依
javascript - 如何在运动路径上有效地反转 SVG (SMIL) 动画？
我正在尝试确定如何有效地反转此 SVG 动画(使用 SMIL)，它使用 animateMotion 和 path 上的 d 属性元素。我需要动画围绕形状逆时针运行。当前动画可以查here相关代码如下
svg - 浏览器对 SVG SMIL(动画)的支持水平
有谁知道流行浏览器中 SVG SMIL 动画支持的当前状态？看起来 Safari、Chrome 和 Opera 都支持它。 Firefox 在他们的开发页面中有关于添加了 SMIL 支持的令人困惑的报
javascript - Safari 的 SVG SMIL 动画解决方法？
我在 Safari 中遇到基本 SVG 动画的问题。它通过仅显示没有动画的 SVG 优雅地失败了，但如果可能的话，我希望它也能在 Safari 中工作。动画与找到的示例非常相似 here :
javascript - 使用 SMIL 制作 SVG 动画
我正在尝试使用 SVG 为视频元素创建 UI。我正在寻找一个简单的解决方案来为控制栏设置动画，当鼠标在其中时(如 YouTube)，我想从窗口底部升起。这是我想做的:
javascript - 是否可以从 javascript 访问 SMIL 计时器？
我正在尝试使用 SMIL以动画方式将文本输入到嵌入在 SVG 中的字段中。我每晚在 Chrome 和支持 SMIL 的 Firefox 中尝试了以下代码，但没有效果:
javascript - Safari 中的 SVG SMIL 动画错误
我一直在看一篇关于 SVG 动画的文章。 Code: http://codepen.io/chriscoyier/pen/DpFfE 文章:http://css-tricks.com/svg-shap
javascript - 使用 SMIL 的 SVG 动画
我对使用 smil SVG 动画和使用 javascript/jquery otf 更改内容有一些疑问。这是我已经尝试过的: HTML/XML:

首页

博学

6Ren·AI

商城

javascript - 使用 SMIL 制作 SVG 动画

上一篇：javascript - 如何从 Internet Explorer DOM 调用 javascript

下一篇：javascript - 将元素拖动到可排序后切换停止工作