在Safari上平滑@关键帧动画变得离散
的问题可以通过以下方式解决：
- 使用CSS动画替代关键帧动画：CSS动画是基于时间轴的动画，可以在不同的关键帧之间自动进行补间动画，从而实现平滑的动画效果。可以使用transition属性结合transform属性来创建平滑的动画效果。
- 使用JavaScript库：可以使用一些流行的JavaScript库如GreenSock Animation Platform（GSAP）或Velocity.js来处理动画。这些库可以处理跨浏览器兼容性，并提供更平滑的动画效果。
- 使用硬件加速：通过将动画元素应用3D转换（例如使用CSS属性transform: translateZ(0)）来启用硬件加速，可以提高动画在Safari上的性能和平滑度。
- 使用requestAnimationFrame：使用requestAnimationFrame方法代替使用setTimeout或setInterval来执行动画更新。requestAnimationFrame可以更好地与浏览器的绘制机制同步，提供更平滑的动画效果。
综上所述，以上是解决在Safari上平滑@关键帧动画变得离散的一些常用方法。这些方法都可以在Safari浏览器上实现平滑的动画效果。对于更详细的实现方式和代码示例，您可以参考以下链接：
- CSS动画：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations
- GreenSock Animation Platform：https://greensock.com/
- Velocity.js：http://velocityjs.org/
- 硬件加速：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Compositing/Using_Hardware_Acceleration
- requestAnimationFrame：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
相关·内容
2回答
我为一个网站建立了一个预加载屏幕，其中有一个用CSS @keyframe设置动画的加载栏。在Chrome和火狐上运行得很好，但在macOS Safari上就变得非常离散了。这是它在Safari上的视频演示：https://www.youtube.com/watch?v=ODV5lN2xZSI&feature=youtu.be 正如你所看到的，加载条背景(灰线)和条本身(黑线)不是从0%宽度
浏览 15提问于2019-10-01得票数 0
回答已采纳
1回答
Blend告诉我我不能在这两个值之间做动画(我在这里不是真的做动画，只是在全屏视频和复合视图之间切换)。有没有什么方法可以用XAML (通过故事板)而不是在代码隐藏中来做这件事？
浏览 0提问于2013-02-27得票数 0
回答已采纳
2回答
我试图结合jQuery和CSS3来提供流畅的动画，但我仍然发现动画可以是抖动的，即使在桌面上也是如此。
我使用下面的代码将我的id从页面边上移到页面上。
浏览 1提问于2014-11-05得票数 0
1回答
据我所知，所有3D动画软件(Maya，Blender.)有框架。也就是说，关键帧只能放置在离散的时间点上。为什么会这样呢？为什么不能在任何时间点放置动画关键帧？动画是在游戏引擎中插值的，游戏框架很少和动画框架相同，即使这样，游戏的框架也会在动画帧之间出现，而我们无论如何也会看到插值动画。
浏览 0提问于2019-02-11得票数 0
它有一个简单的介绍动画，如下所示： PropertyValuesHolder c=PropertyValuesHolder.ofInt("c",0,100); postInvalidate(); });anim.start(); 对于大约50个关键帧，它可以平滑地工作，但是在放置
浏览 22提问于2019-06-06得票数 0
回答已采纳
我已经为一个图像定义了一个关键帧，它将它移动到一个半圆形的路径中。我使用了一个线性动画计时函数，但它在点之间不够平滑。在此之后，我考虑使用bezier easeInExpo函数进行更好的转换，但它只是变得更糟了。如果我在关键帧上定义了多个点，那么bezier是步进的，一点也不平滑，但是如果我定义了起始点和端点，那么它是平滑的，但是它跳过了路径。100% { to
浏览 4提问于2021-02-21得票数 1
回答已采纳
1回答
水平文本滚动的光滑动画循环
、、、、
我试图通过使用translateX属性为文本(span)提供无限大的关键帧动画。TEXT </span><
浏览 2提问于2022-03-04得票数 1
回答已采纳
3回答
我尝试过很多不同的javascript框架，比如jquery，甚至像$fx这样的动画专用框架，我都无法达到我想要的流畅度。我最近看到了两个非常流畅的动画例子，要么是在电脑上，要么是在iPhone和iPad上。它们是如何实现如此流畅的动画的？
浏览 2提问于2012-01-07得票数 2
我在我的网站上有一些(几乎)全屏幕的淡入/淡出动画，它们在Safari和Chrome (Windows7 64位，jQuery 1.7.2)中出现卡顿：()那么，我该如何改善淡入淡出的动画呢？
浏览 1提问于2012-05-04得票数 0
回答已采纳
2回答
我得到了一个简单的CSS动画，如下所示： 0% { bottom: 0px; left: 24px; } 90% { bottom: 0px; } 100% { bottom: 0px; left: 24px; }在Chrome中，它的工作方式和我期望的一样，但是在Safari中，它并不像我期望的那样播放
浏览 0提问于2010-11-14得票数 2
回答已采纳
1回答
我创建了一个3D旋转立方体，在Chrome和Firefox中运行得很好。然而，它在Safari (桌面和移动)中根本没有动画。我正在使用CSS的自动修复程序，所以应该没有问题，但我似乎无法解决为什么我不能让它在Safari动画。我使用的CSS规则中是否有Safari不支持的规则？
浏览 3提问于2022-04-14得票数 0
回答已采纳
我已经创建了自己的视图之间的过渡动画。我对位置和变换这两个属性进行了动画处理，以便在视图之间提供类似于立方体的过渡。在我的过渡中，我在中间的关键帧上应用CATransform3DScale来创建放大/缩小效果。这很好用，除了动画看起来有点抖动。它是以线性的方式在关键帧之间设置动画，我想要平滑这一点。下面是为一个视图的变换添加动画的代码(一个类似的代码块为另一个视图添加<e
浏览 0提问于2012-07-21得票数 4
回答已采纳
1回答
我正在为我正在做的一个项目编写一个定制动画。这个想法是，动画就像一个惊叹号，从基线开始失控，摇动一会儿，然后完全从基线上掉下来。出于某种原因，只有Safari (OSX和iOS)拒绝在我制作的CSS动画中将第一个动画关键帧呈现为顺时针旋转。相反，它将关键帧呈现为逆时针方向的动画，但是对于下面的动画关键帧，它的工作效果非常好。translate(0) rotate(0deg); 100%
浏览 4提问于2016-02-03得票数 4
回答已采纳
我让它以在Chrome、Firefox和IE中应该的方式工作。然而，在mac 10.7.5版本的Safari 6.0.5中，在滚动时动画元素是非常不稳定的。基本上，当我向下滚动时，它没有动画的关键帧。相反，它只是根据我滚动的位置跳到某个关键帧。我不明白为什么它只在Safari中这样做。我很抱歉，但我不能张贴一个链接到该网站由于保密协议。在这方面的任何帮助或建议都将非常感谢。
浏览 2提问于2013-10-10得票数 4
我想增加一个UIImageView的高度与每个动画帧使用核心动画。有没有办法做到这一点？
我已经使用NSTimer做到了这一点。
浏览 0提问于2010-03-23得票数 0
1回答
我发现mpld3库在美学上令人愉悦的一件事是，在使用缩放工具()选择一个区域后，可以平滑地进行缩放。Bokeh的默认行为似乎是在没有任何动画的情况下跳到缩放区域(，“轮子缩放”是平滑的，但“框缩放”不是)。
平滑缩放功能是否在Bokeh中可用，并且在默认情况下被禁用，或者这是没有实现的？
浏览 1提问于2015-04-17得票数 0
有没有可能用一张图片(或其他任何东西)来做一些平滑的动作？加速，减速……我知道我们可以使用关键帧几何来移动元素，但移动并不平滑。目标是添加一些放松(ease-in / ease-out / ease-inout...)在图片幻灯片中。这个“弹力球”的例子并不是很流畅：
我的用途是在linux服务器上使用命令行，我不使用任何Kdenlive或shotcut。
浏览 6提问于2018-11-03得票数 1
1回答
我正在创建一个反应应用程序和使用框架运动的动画，我试图循环一个中心轴周围的盒子，这样它的旋转运动可能看起来是3d的。我正在定义关键帧，例如，如果我想在轴上移动框，我使用{ x: [0, -100, 0, 100, 0] }，问题是圆形运动需要是平滑和一致的，但是框架运动减缓了每个关键帧的动画速度，这并不能产生我想要的效果
浏览 1提问于2022-06-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
