animation 相关问题

动画是一系列视觉效果的快速显示,以创造运动或变化的幻觉。

whileHover 效果在鼠标进入时起作用,但在鼠标离开后效果仍然存在(React、Framer Motion)

我试图使用滤镜:drop-shadow() 效果,当鼠标悬停在某些图像上时,使它们从外部发光。目前,当我将鼠标悬停在图像上时,会应用阴影,但是...

回答 1 投票 0

在两个关键帧之间的一个特定时间点解释 css 关键帧动画/混合两个 css 关键帧

我想使用css关键帧动画制作一个css动画编辑器工具。 这个想法是有一个时间线来播放和预览 CSS 动画,并确定关键帧。 问题在于

回答 1 投票 0

GroupBox 在选择器的选择更改时没有动画

我在组框中有一个选择器视图。当更改选择器内的选定值时,选择器标签的大小会发生变化,组框的宽度也会发生变化。我在组框上添加了动画...

回答 1 投票 0

使用 CSS 实现逐字母文本外观动画

我有一个带文字的。 Lorem ipsum dolor sat amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。 我想要这个...中的文字 我有一个带有文字的<div>。 Lorem ipsum dolor sat amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。 我希望<div>中的文本一次一个字符地出现在页面上: L 洛 洛尔 ...依此类推,直到全文可见 可接受的替代方案:一次执行一个单词,以避免 HTML 实体出现问题以及由于软连字符而导致单词跳动。 如果用户点击<div>,它应该取消动画并立即显示全文。 总之,我想模仿日式冒险游戏中常见的动画。 (我认为这有时被称为打字机或电传打字机效果。)这是一个很好的例子: http://www.youtube.com/watch?feature=player_detailpage&v=SasgN0lim7M#t=418 显然,我可以使用 JavaScript 编写动画脚本 - 只需设置一个计时器并逐一附加字母(或单词)即可。 但是可以在现代浏览器中使用 CSS 来完成我需要的操作吗? (当然,我至少需要用JS改变onclick中的元素类,但这没关系。) 更新:澄清字符与字母以及 HTML 实体的问题: 我的文本中充斥着 HTML: Lo&shy;rem <i>ip&shy;sum</i>. 将文本逐个字符附加到 innerHTML 的幼稚方法是行不通的: L 洛 洛& ...呸! 您可以使用一些 jQuery 来实现此目的。 看看我的小提琴:http://jsfiddle.net/kA8G8/7/ HTML <p class="typewriter">Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> JS var text = $('.typewriter').text(); var length = text.length; var timeOut; var character = 0; (function typeWriter() { timeOut = setTimeout(function() { character++; var type = text.substring(0, character); $('.typewriter').text(type); typeWriter(); if (character == length) { clearTimeout(timeOut); } }, 150); }()); 不幸的是,你不能使用 CSS 来做到这一点,所以你必须恢复到纯 JS 方法。 正如您的评论所解释的,您需要文本包含一些 HTML 标记,因此我建议逐字动画是处理该问题的最简单方法。像这样的东西: var timer, fullText, currentOffset, onComplete, wordSet; function Speak(person, text, callback) { $("#name").html(person); fullText = text; wordSet = text.split(" "); currentOffset = 0; onComplete = callback; timer = setInterval(onTick, 300); } function onTick() { currentOffset++; if (currentOffset == wordSet.length) { complete(); return; } var text = ""; for(var i = 0; i < currentOffset; i++){ text += wordSet[i] + " "; } text.trim(); $("#message").html(text); } function complete() { clearInterval(timer); timer = null; $("#message").html(fullText); if (onComplete) onComplete(); } $(".box").click(function () { complete(); }); Speak("Simon", "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", function () { setTimeout(function () { Speak("Javascript", "Simon has finished speaking!"); }, 2000); }); 这是一个工作示例 注意:此代码可能会被大量重构,以变得更加高效和简洁,但它应该完整地演示这个概念。 我还创建了一个逐字母的示例。虽然它不支持您的 html 标记需求,但它看起来确实更好,所以也许您可以调整它以适合您。 有一个纯 CSS 技巧可以做到这一点。 使用遮罩元素,甚至是 z-index 高于文本元素的伪元素 p:before 或 p:after。为其指定与文本背景相同的颜色和行高。将其绝对位置放置在文本上方。 然后你只需对其进行动画处理,使其向右移动,一个字母一个字母地揭开。 这只是一种解决方法,因为如果文本下方有复杂的背景(例如图像),那么此技巧很难重现,因为您必须将背景图像映射到遮罩元素上。 我知道这不相关,但我喜欢这种动画,所以我创建了这个工具: https://imageecho.app/ 享受!

回答 4 投票 0

ggplot2 中 geom_circle 的动画显示无意的插值圆

我用R中的gifski包创建了一个GIF动画。 这是输入和输出数据(抱歉我不知道是否可以通过在线存储服务共享)。 https://drive.google.com/drive/folders/

回答 1 投票 0

如何创建开始和结束速度极慢的 Framer Motion 动画?

我正在尝试使用成帧器运动创建一个动画,该动画将缓慢开始,尤其是非常非常缓慢地结束。寻找类似的效果,就像在这个网站上一样:https://wheelofnames.com/ 我已经

回答 1 投票 0

Flutter MouseRegion 滚动时悬停暂时暂停,导致项目按钮停止跟踪鼠标移动

我在 Flutter 应用程序中遇到一个问题,当滚动开始时,MouseRegion 内的悬停效果会中断。此中断导致“项目”按钮停止跟踪鼠标

回答 1 投票 0

js animate() 方法未按预期工作

我正在为我的项目制作一个动画轮,它应该像这样工作: 用户单击下一个按钮,并伴随动画,滚轮转动 90 度,并且会出现一个项目,我必须说

回答 1 投票 0

SwiftUI / ScrollView中基于scrollPosition的动画

我正在开发一个 IOS SwiftUI 项目,我试图在滚动行为中复制这种动画(不确定它是否有名称): https://www.lemonde.fr/les-decodeurs/visuel/2023/06/07/comp...

回答 1 投票 0

Javascript 内存泄漏在动画期间将新图像加载到对象中

我有一种方法,可以在每次循环动画时用新图像更新对象,但会导致持续的内存泄漏,最终使动画的其余部分陷入停滞。这是

回答 1 投票 0

在 React Native 中使用衰减动画和循环动画

我最近一直在学习React Native动画,我正在尝试实现一些动画。 我想创建一个弹跳球动画,我做到了。一切正常,但是这个动画......

回答 1 投票 0

如何使用按钮单击上的钩子重新设置反应弹簧动画?

以下来自官方示例的简单组件: 从“react-spring”导入{useSpring,动画} 函数应用程序(){ const props = useSpring({opacity: 1, from: {opacity: 0}}) 返回 <

回答 2 投票 0

React 中 GSAP 的无限循环动画以空白而不是无缝延续结束

我正在开发一个 React 项目,我想使用 GSAP 创建无限循环动画。我有一行从左下角到右上角动画的元素。想要的效果是动画...

回答 1 投票 0

如何反转点击时内容视图的打开动画

函数 moveRectangles(事件) { var 矩形 = document.querySelectorAll('.rectangle'); 变量间隙= 5; // 矩形之间的间隙 变量距离 = 100; // 每个矩形移动的距离 // ...

回答 1 投票 0

如何以编程方式将动画.tres添加到动画播放器(gui工具)?

是否可以通过编程方式同时将动画.tres加载到动画播放器(gui工具)?我知道动画是资源,我确实阅读了一些 godot 文档,但我没有找到任何与...相关的内容

回答 1 投票 0

在 Flutter 中实现 Lottie 动画

我想使用 Flutter 代码实现这个 Lottie 动画并动态更改其中的文本,有什么方法或包可以做到这一点吗? 动画: https://lottiefiles.com/animations/lower-

回答 1 投票 0

禁用 SwiftUI 框架动画出现

目标 假设我有一个 List 或 LazyVGrid,它显示嵌套在 ScrollView 内的多个项目。我使用 ForEach 视图来生成各个项目视图: ForEach(items) { 中的项目 伊特...

回答 3 投票 0

更新 matplotlib 动画 3D 中的 x/y/z 限制

当我尝试调整3D动画中轴的限制时,我遇到了这个问题。看起来屏幕上的限制范围不是我想要的,而是

回答 1 投票 0

CSS 在徽标图像上加载闪耀效果

我想对徽标图像实现闪耀效果,这应该是一个微妙的加载指示。 它应该类似于这样: .icon:悬停:之后{ 不透明度:1; 顶部:-30%; 左:-30%;

回答 1 投票 0

如何添加动画并在表格中闪烁新添加的行,同时保持所有其他行样式不变?

我在基于 Nuxt 3 或 Vue 3 的应用程序中使用 HTML 表,并通过单击按钮向其中添加一行。 当我添加新行时,我想添加一种过渡/动画,以便...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.