- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试使用 AnimeJS 使 div 跟随路径。
有两个问题:
我解决问题 #2 的方法是将 css 添加到 SVG:transform: scaleX(-1) rotate(180deg);
但它导致了进一步的问题。
HTML:
<div class="cont">
<div class="will_follow"></div>
<svg...></svg>
</div>
CSS:
.cont {
width: 100%;
height: 100%;
position: relative;
}
.cont svg {
width: 100%;
height: 100%;
}
.will_follow {
position: absolute;
height: 3px;
width: 3px;
background-color: red;
}
JS
var path = anime.path('#tracking path');
anime({
targets: '.will_follow',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 10000,
loop: true
});
我想这与我的 svg 导出本身有关?是 svg 中的视口(viewport)吗?
感谢您花时间考虑我的问题
最佳答案
:
抱歉,这只是部分答案:您的 svc 使用 scale(1,-1) 进行转换(将其上下颠倒),然后 css 将 svg 缩放到 100% 屏幕大小,但后续路径仍然具有相同的大小。
改造后:
https://jsfiddle.net/eqkwj8zg/
html
<div class="cont">
<div class="will_follow"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="810" viewBox="0 0 1440 810" style="stroke-linejoin:bevel;stroke-width:0.5">
<g font-family="Times New Roman" font-size="16" style="fill:none;stroke:black">
<g style="fill:#5ccf43;stroke-width:7">
<path d="M0 810L0 0C0 0 0 0 0 0L1440 0C1440 0 1440 0 1440 0L1440 810C1440 810 1440 810 1440 810L0 810C0 810 0 810 0 810Z"/>
</g>
<g stroke-width="0.5">
<g fill="#fdf4ad">
<path d="M0 810L0 597.6 0 597.6 0 700.9C3.1 701.1 191.4 692.6 184.4 597.3 184.4 582.2 196.7 569.9 211.9 569.9L295.3 569.9 295.3 413.5 209.8 413.5C194.6 413.5 182.3 401.2 182.3 386.1L182.3 209.9C182.3 194.8 194.6 182.5 209.8 182.5L1151.9 182.5C1167.1 182.5 1179.3 194.8 1179.3 209.9L1179.3 377.4C1179.3 392.6 1167.1 404.9 1151.9 404.9L1040.5 404.9 1039.8 491.4C1039.7 506.4 1027.4 518.6 1012.4 518.6L793.4 518.6C778.3 518.6 766.1 506.4 766 491.4L765.2 359.3 545.7 359.3 545.7 627.6 930.6 627.6C945.7 627.6 958 639.9 958 655L958 700.5 1440 700.5 1440 755.3 930.6 755.3C915.4 755.3 903.1 743.1 903.1 727.9L903.1 682.4 518.3 682.4C503.2 682.4 490.9 670.1 490.9 655L490.9 331.8C490.9 316.7 503.2 304.4 518.3 304.4L792.5 304.4C807.6 304.4 819.8 316.6 819.9 331.7L820.7 463.8 985.1 463.8 985.8 377.3C985.9 362.2 998.2 350 1013.3 350L1124.5 350 1124.5 237.3 237.2 237.3 237.2 358.7 322.8 358.7C337.9 358.7 350.2 371 350.2 386.1L350.2 597.3C350.2 612.4 337.9 624.7 322.8 624.7L239.3 624.7C237 656.8 232.7 693.2 239.3 722.8 249.4 772 57.3 781 58.3 810L0 810Z"/>
</g>
</g>
<path id="followme" d="M0 785.3C75.3 700 167.9 747.1 204 645L216.4 597.3 322.1 597.3 322.1 386.1 209.1 386.1 209.1 209.9 1151.3 209.9 1151.3 377.4 1012.6 377.4 1011.7 491.2 792.7 491.2 791.9 333.2 520.3 333.2 520.3 655 929.9 655 929.9 727.9 1440 727.9" style="fill:none;stroke-linejoin:round;stroke-width:0.8;stroke:#f00"/>
</g>
</svg>
</div>
JavaScript
var path = anime.path('#followme');
anime({
targets: '.will_follow',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 10000,
loop: true
});
CSS
.cont {
width: 100%;
height: 100%;
position: relative;
}
.will_follow {
height: 10px;
width: 10px;
background-color: red;
}
在这里,我通过应用转换的 svg 优化器提供 svg,(这消除了图像的翻转)然后删除缩放。现在红点正确地遵循了路径,我没有找到如何将动画缩放到屏幕大小你
总而言之:您需要找到应用于 svg 的转换(svg 转换和 dom 转换)并将它们应用于您的动画
关于javascript - SVG 路径跟随翻转和旋转 + 不跟随路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54631055/
我试图在我的数据库中找到所有关注该用户的用户。 followers 集合有 3 个字段:_id、_t、_f。 当一个用户关注另一个用户时,它会将他们的用户 ID 添加到 _f 并将目标用户的 ID 添
我有一个 UICollectionView,它由单元格中的 UIImagePickerControl 按钮填充,我希望跟随 Collection View 末尾的单元格通过屏幕,但仍允许用户滚动 -
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 9 个月前。 Improv
好的,所以我知道如何将文本剪裁成特定的几何形状,但是文本不会根据剪裁自动换行,那么如果您有“勾选”作为几何/路径? 是否需要手动添加适合每一行的文本框,然后根据适合/不适合的内容拆分文本? 最佳答案
我里面有链接 s,但我在所有 上也有一个点击事件s。代码如下所示: $( document ).ready( function() { $( 'td.event' ).click( func
短版: 是)我有的: 2 元组列表,例如 [("a", "b"), ("b", "c"), ("d", "e"), ("c", "d"), ("f", "g")]不一定按字母顺序排列 我想要的是: 给
我正在尝试使用 xpath 来获取表的内容。 表格看起来像这样 Stuff Contents Contents Stuff
我有几个像这样的div: My Link 问题是,如果用户单击 div 而不是文本,则链接不会触发。这是我到目前为止所拥有的: $('#TopMenuBar .MenuList').click
我想要做一个链接到这个 .after() 的 .fadeIn() 动画,但这似乎不是这样做的方法。有什么建议吗? $(clicked_item).parent().parent().parent().
int getIdForSong(Song song){ String selectQuery = "SELECT id FROM " + TABLE_SONG + " WHERE " + S
现在右侧的 div 一直跟随滚动。如果我想让它在页面滚动到div的顶部时开始跟随滚动,并在向上滚动时让它保持在那里,我还需要做什么? jsfiddle $(window).scroll(functio
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我正在为我的客户设计一件 T 恤,我使用 html5 Canvas 制作了它。衬衫设计师现在已经完成,但他要求我添加一个放大镜(类似这样的东西:http://mlens.musings.it/)。我在
我正在尝试调试远程主机上的 fork 进程,但每次都让 gdbserver 进程在子退出时结束。 尝试在 .gdbinit 中设置“set follow-fork-mode child”,没有帮助。
我正在制作一个带有滚动控件的响应式菜单。我有一个小问题,我的渐变和控件跟随,滚动时,你可以在我的 JSFiddle 中看到它. 我的菜单控件有我的 CSS #page .page-nav .contr
我将我的页面分为左右两部分。我用 div 来制作左导航和右导航。在右侧导航中,我也有多个 div。现在,当我向下滚动页面时,只有页面的右侧部分正在滚动,而左侧导航则停留在那里。 所以当我向下滚动页面时
我刚刚开始使用 svg 和 anime.js。我正在尝试重新创建 svg motion path在文档中找到我自己的 Assets 。不过,我没有使用 div 来跟随路径,而是使用了另一条路径。 我有
我将展示整个代码,但请注意指针上方的引号,因为我将在那里讨论我的问题。我会在引用评论中告诉你我认为那里发生了什么。代码编译并运行,我只需要帮助理解部分代码。 #include #include i
我在左侧有一个 div,其中包括营业时间和天气。我希望该 div 根据用户的滚动方式向下和向上滚动。所以它会跟随页面上下移动。我将如何尝试呢?这是我的网站judystropicalgarden.com
所以我遇到了这个小问题,我的相机错误地固定在播放器上。 左上角的蓝色 Sprite 是玩家,但它应该位于屏幕中央。关于这个问题的所有其他线程都使用固定渲染管道,而我使用基于 VBO 的线程。 我的矩阵
我是一名优秀的程序员,十分优秀!