- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当 SVG 对象沿着贝塞尔曲线进行动画处理时,我有什么方法可以“弯曲”它?我主要使用 GSAP 来制作动画。效果看起来像这样:https://www.behance.net/gallery/49401667/Twist ed-letters-2(带蓝色铅笔的那个)。我设法让红色箭头沿路径设置动画,但形状始终保持不变。我希望它沿着绿色路径前进并在它绕曲线移动时弯曲,以便在动画结束时它具有紫色箭头的形状。这是codepen .
GSAP代码:
var motionPath = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#arrow1"});
var tl1 = new TimelineMax({paused:true, reversed:true});
tl1.set("#arrow1", {xPercent:-50, yPercent:-50});
tl1.to("#arrow1", 4, {bezier:{values:motionPath, type:"cubic"}});
$("#createAnimation").click(function(){
tl1.reversed() ? tl1.play() : tl1.reverse();
});
最佳答案
这就是我将如何做到的:
首先,我需要一组点来绘制箭头和轨迹。我想在轨道上移动箭头,箭头应该跟随轨道弯曲。为了在动画的每一帧中实现这种效果,我正在计算箭头点的新位置。
另外:轨道是接缝长度的两倍。
请阅读代码中的注释
let track = document.getElementById("track");
let trackLength = track.getTotalLength();
let t = 0.1;// the position on the path. Can take values from 0 to .5
// an array of points used to draw the arrow
let points = [
[0, 0],[6.207, -2.447],[10.84, -4.997],[16.076, -7.878],[20.023, -10.05],[21.096, -4.809],[25.681, -4.468],[31.033, -4.069],[36.068, -3.695],[40.81, -3.343],[45.971, -2.96],[51.04, -2.584],[56.075, -2.21],[60.838, -1.856],[65.715, -1.49],[71.077, -1.095],[75.956, -0.733],[80, 0],[75.956, 0.733],[71.077, 1.095],[65.715, 1.49],[60.838, 1.856],[56.075, 2.21],[51.04, 2.584],[45.971, 2.96],[40.81, 3.343],[36.068, 3.695],[31.033, 4.069],[25.681, 4.468],[21.096, 4.809],[20.023, 10.05],[16.076, 7.878],[10.84, 4.997],[6.207, 2.447],[0, 0]
];
function move() {
requestAnimationFrame(move);
if (t > 0) {
t -= 0.001;
} else {
t = 0.5;
}
let ry = newPoints(track, t);
drawArrow(ry);
}
move();
function newPoints(track, t) {
// a function to change the value of every point on the points array
let ry = [];
points.map(p => {
ry.push(getPos(track, t, p[0], p[1]));
});
return ry;
}
function getPos(track, t, d, r) {
// a function to get the position of every point of the arrow on the track
let distance = d + trackLength * t;
// a point on the track
let p = track.getPointAtLength(distance);
// a point near p used to calculate the angle of rotation
let _p = track.getPointAtLength((distance + 1) % trackLength);
// the angle of rotation on the path
let a = Math.atan2(p.y - _p.y, p.x - _p.x) + Math.PI / 2;
// returns an array of coordinates: the first is the x, the second is the y
return [p.x + r * Math.cos(a), p.y + r * Math.sin(a)];
}
function drawArrow(points) {
// a function to draw the arrow in base of the points array
let d = `M${points[0][0]},${points[0][1]}L`;
points.shift();
points.map(p => {
d += `${p[0]}, ${p[1]} `;
});
d += "Z";
arrow.setAttributeNS(null, "d", d);
}
svg {
display: block;
margin: 2em auto;
border: 1px solid;
overflow: visible;
width:140vh;
}
#track {
stroke: #d9d9d9;
vector-effect: non-scaling-stroke;
}
<svg viewBox="-20 -10 440 180">
<path id="track" fill="none"
d="M200,80
C-50,280 -50,-120 200,80
C450,280 450,-120 200,80
C-50,280 -50,-120 200,80
C450,280 450,-120 200,80Z" />
<path id="arrow" d="" />
</svg>
关于animation - 您可以在动画时围绕贝塞尔曲线路径 "bend"SVG 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54155535/
我想使用 linux 终端在 .txt 文档中找到字符串 animal-0**。 ** 是从 60 到 69 的数字。我想我必须在命令中使用 grep 和正则表达式:grep -E 'animal-0
在他的C# 深入一书中,Jon Skeet 试图回答以下问题: Why can't I convert List to List? 为了解释它,他从一个代码片段开始,其中包括以下两行: Animal[
我对此有点困惑,所以希望能提供一些说明。 public void addAll(List animals) 对比 public void addAll(List animals) 最佳答案 区别在于
我遇到的情况是,我有许多CALayer以“基于回合”的方式进行动画处理。我为每个CALayer上的位置设置了动画,但是它们具有完全相同的持续时间。一旦所有这些CALayer动画完成,就会启动一个新的“
我为正在拔出的刀和空闲状态设置了动画,但是无论我做什么,它们都不会在游戏中设置动画。相反,它卡住在第一帧上。这是动画窗口运行时的样子: 动画: 在检查器中: 最佳答案 我遇到了类似的问题,它归结于动画
我的单个 HTML 文件中嵌入了 2 个页面。所以它所做的是最初它显示 PAGE1,然后如果我从右向左或从左向右滑动 PAGE2 应该显示。我的问题是如何根据我的滑动更改页面动画?比如当我从右向左滑动
我想做一个动画标题。 我创建了一个 FlatList 的动画组件, 用过 onScroll函数来更新动画值。 使用绝对位置放置一个 View (Animated.View) 作为动画 FlatList
我想制作一个打开的窗帘的动画。我有两张图像:一张用于窗帘的左侧,一张用于窗帘的右侧(以红色表示)。我想用核心动画顺利地将它们滑走。我应该寻找什么类型的动画?如何实现逼真的滑动风格? 问候, 斯特凡 a
我有一个简单的旋转动画,可以让一个对象绕其轴旋转。目前它旋转得太快了,我想减慢速度,我试过增加样本??但我对动画了解不多,所以我可能过得很好。如何放慢动画速度?它只有两个键。 最佳答案 首先,通过双击
我似乎无法在上类时获得 angularjs ng-animate,而且在野外似乎也没有任何示例。以演示 fiddle 为例: http://jsfiddle.net/yfajy/ 向 CSS 添加如下
使用以下代码段:http://jsfiddle.net/sylouuu/V7a3Y/2/ 我想在动画的#log 中显示从 0% 到 100% 的进度百分比,100% 很容易通过回调... 有可能这样做
我正在 HTML 中使用 SVG 来使用折线工具定义特定的形状。我希望通过按一下按钮并在几秒钟内将特定形状的外观动画化为不同的形状。 我一直在考虑使用动画工具来更改折线点属性,但到目前为止一直无法找到
您好,在 Firefox(相当糟糕)和 Chrome 之间获得可变性能和效果(还可以)有时这不会执行第一个动画,有时会卡住。 我的结构正确吗? $notification.animate({
我在 iOS 编程时遇到了一个问题:当我尝试为我的 tableView 制作自定义编辑按钮时,我无法将其设置为动画。下面是我如何初始化 tableview: - (void)viewWillAppea
自 beta 5 以来,我注意到在 OS X 10.10 下隐式动画有一些奇怪的行为。调用动画代理有时会导致应用程序崩溃。我设置了一个非常简单的自定义 View 。这是完整的代码: import Co
我正在开发一个可折叠组件,您可以单击它来向上/向下滚动以显示/隐藏详细信息。组件如下: // component.ts import {Component, Directive, Input} fro
我正在努力了解 web animations standard和他们的 polyfill ,正如我所见,它在 Angular 动画库中运行良好(您将动画结束值设置为“*”,这将变为 div 大小的 1
我想创建一个动画闪屏,但出现此错误: Android.Content.Res.Resources+NotFoundException: File res/drawable/splash_screen.
我正在尝试对我的应用程序应用慢动作效果,就像按 Shift 时如何减慢 Mac OS 的大多数图形效果一样。 我的应用程序使用 CoreAnimation,所以我认为它应该没什么大不了的:set sp
我想以编程方式同时不在XML文件中显示两个动画,它应该 ROTATE和TRANSLATE 我怎样才能做到这一点? 请以某种方式建议我?????? 这是ma代码:> ImageView snowImg1
我是一名优秀的程序员,十分优秀!