使用bodymovin JSON更改SVG上的viewbox值
是指通过使用bodymovin库中的JSON文件来修改SVG图像中的viewbox属性值。
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以用于在Web上显示图形。viewbox是SVG中的一个属性，用于定义SVG图像的可见区域和坐标系。
通过使用bodymovin库，可以将Adobe After Effects中创建的动画导出为JSON文件，并在Web上播放。在这个过程中，可以通过修改JSON文件中的viewbox值来改变SVG图像的可见区域。
具体步骤如下：
- 在Adobe After Effects中创建动画，并使用bodymovin插件导出为JSON文件。
- 打开JSON文件，可以看到其中包含了动画的各种属性和参数。
- 在JSON文件中找到SVG图像的相关部分，通常以"layers"为关键字。
- 在SVG图像的相关部分中，找到包含viewbox属性的部分。
- 修改viewbox属性的值，可以改变SVG图像的可见区域。viewbox属性的值通常是一个包含四个数字的字符串，分别表示图像的左上角x坐标、左上角y坐标、宽度和高度。
- 保存修改后的JSON文件。
通过修改JSON文件中的viewbox值，可以实现对SVG图像可见区域的调整，从而改变动画的显示效果。
在腾讯云的产品中，与SVG图像处理相关的产品包括：
- 腾讯云图片处理（https://cloud.tencent.com/product/tci）：提供了丰富的图片处理功能，可以对SVG图像进行裁剪、缩放、旋转等操作。
- 腾讯云云点播（https://cloud.tencent.com/product/vod）：提供了视频处理和转码服务，可以将SVG图像转换为视频格式，并进行各种处理。
以上是关于使用bodymovin JSON更改SVG上的viewbox值的解释和相关腾讯云产品的介绍。
相关·内容
1回答
bodymovin:将.JSON转换为.SVG？
json、svg、bodymovin
我的问题是:有没有办法把.json转换成.SVG？
我的情况:我已经创建了动画adobe after effects，然后在after effects中使用Bodymovin扩展名输出一个文件
我得到了一个.json文件和一个显示动画的html文件，但这些似乎不是我可以获得.svg的地方，除非我能找到一种方法来转换.json，这就是为什么我在这里。.svg文件/ json文件都包含动画数据。我想在网络上使用这些动画，特别是.svg文件
我尝试过的:搜索谷歌结果一个小时，寻找解决方案，到目前为止似乎还没有
浏览 11提问于2020-04-13得票数 0
1回答
SpriteKit，如何从Adobe After Effects导入动画
ios、swift、animation、sprite-kit、after-effects
我目前正在为ios开发一款使用SpriteKit作为框架的2d手机游戏。
我用adobe after effects制作了所有的动画，现在我必须将它们导入到应用程序中。
我没有使用Apple和其他教程推荐的纹理序列，而是读到了一个名为Bodymovin的after effects插件。它导出的帧和.json文件较少。然后在Xcode中，我安装了一个名为Lottie的pod以使其正常工作。嗯，这对UIViewController来说是可以的。
有人知道有没有一种方法可以从after effects中导出动画，并使其在SpriteKit中简单地工作？
谢谢
浏览 5提问于2018-09-17得票数 5
1回答
Lottie - iOS。App显示来自web的JSON动画，但不是在After Effects中呈现的JSON动画
ios、json、after-effects、lottie、bodymovin
我有一个iOS应用程序，将显示和播放乐透动画。我成功使用的动画来自www.lottiefiles.com，所有的动画都是从那里开始的。
我已经在After Effects中创建了自己的动画，并使用BodyMovin导出，然后尝试显示它，但没有显示任何内容。
Xcode抱怨图片丢失了，但它从来没有要求(也没有)从www.lottiefiles.com下载的JSON动画的图片，应用程序仍然在播放它们。
我添加了图像，但仍然什么都没有显示，并且仍然抱怨图像丢失。
我尝试了BodyMovin的不同设置，例如：“原始资源名称-使用原始项目名称导出资源”&“包含在JSON中-包含以json编码的光
浏览 1提问于2018-07-02得票数 1
2回答
父DIV的CSS干扰SVG动画
javascript、css、svg、bodymovin
我们已经将使用Adobe After Effects Bodymovin插件创建的SVG/JS动画从一个Wordpress站点移动到另一个站点。在旧的站点上(不幸的是我不能展示给你看)，动画运行得天衣无缝。在新站点上，根据浏览器窗口的大小，动画包含一些毛刺，这些毛刺似乎是由动画蒙版中的某种舍入误差引起的。 在地球的一个或多个边缘上，偶尔可以(根据视口宽度)看到一个像素宽的滚动背景图形。请参见图像。 ? 我已经在CodePen中隔离了动画。无论视口设置为什么大小，它都可以很好地工作在here中。 但是，当我介绍这一小部分CSS时... margin: 0 auto;
width: 70
浏览 25提问于2019-01-23得票数 0
回答已采纳
1回答
Lottie本地动画不在网页上显示
lottie、bodymovin
我有一个简单的html可以显示我在After Effects中制作的动画，但我无法在本地加载时显示动画(data.json)。但如果我通过LottieFiles上传动画，并使用在html文件中生成的链接，它就可以工作。谁能解释一下为什么我不能通过我的data.json加载动画，而不是从生成的链接？ 下面我放了我到目前为止的代码： <head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<
浏览 60提问于2019-12-17得票数 1
2回答
腾讯云对象存储上载成功返回的JSON中的vid是什么？可以用来获取对象吗？
对象存储、java、json
Java SDK源码的demo中上传文件成功返回的JSON中的vid是什么？可以用这个来获取到对象吗？
考虑到存储的文件的安全性，腾讯云是否有提供什么方法对文件的下载进行限制呢？
浏览 543提问于2017-10-20
1回答
使用bodymovin JSON更改SVG上的viewbox值
javascript、json、svg、bodymovin
刚接触bodymovin。有没有一种方法可以在将导出的SVG解析到浏览器中之后，通过使用Javascript或编辑data.json来更改它的viewbox？基本上，我希望viewbox的最终输出是"50 0 400 400“。我可以通过更改data.json中的"w“和"h”属性来更改最后两个值。
浏览 13提问于2017-08-25得票数 3
1回答
如何查看对象动画svg中的任何更改
javascript、animation、svg、mutation
我需要用att对象动画svg观看更改。
const windowData = {
container: document.getElementById('window-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/windows.json'
};
const windowAnim = bodymovin.loadAnimation(windowDat
浏览 5提问于2022-09-27得票数 0
回答已采纳
4回答
在运行时动态替换Lottie动画中的图像
android、lottie
我有一个后效动画，超级简单，广场移动(AE形状)。我使用Bodymovin将动画导出为.json，并在我的项目中使用Lottie添加json文件。到现在为止还好。
问题从这里开始->在运行时，用我在项目中的图像替换那个“正方形”。因为这个图像可能会改变，所以我不能将它静态地添加到我的AE动画中，所以需要在运行时动态地添加它。在Android系统中，几乎没有关于如何做到这一点的信息？
浏览 1提问于2019-02-04得票数 7
回答已采纳
1回答
SVG动画不按预期设置属性。
animation、svg、snap.svg
我试图动画一个SVG元素的视口的改变。当单击SVG中的特定椭圆时，视口将被更改，以便将其放大到椭圆上。根据我对W3C动画规范的解释，当使用fill="freeze"时，to属性中的值将保持不变。但是，当我使用console.log("after animation: "+canvas.getAttribute("viewBox"));时，viewBox和以前一样(动画确实放大)。对于额外的信息，<animate>是在单击椭圆时添加的。这是如何将动画添加到<svg>中的代码；
var canvassnap=Snap(canv
浏览 1提问于2014-07-31得票数 0
回答已采纳
5回答
微信小程序人脸与身份证照片对比登录,后端做什么？
官方文档、小程序·云开发
微信小程序前端和后端分别要做些什么 ? 所有需要的东西有哪些 ? (请尽量详细点)
标题：人脸识别 - 智能图像服务 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/641/12397
浏览 2449提问于2018-01-24
1回答
使用Greensock设置Chevron动画
javascript、animation、sass、gsap
因此，我正在尝试使用Greensock库来制作一个人字形的动画。我的目标是让
转到：
我在Codepen 上有一个工作版本，我的目标是chevron的id，我有一个使用MorphSVG gs函数附加到它的小事件侦听器。但是，我想让人字形从底部开始动画，然后慢慢地向上动画。现在，它只是在单击时更改SVG坐标。
代码如下：
var chevron = document.getElementById("chevron");
chevron.addEventListener('click', function(){
TweenLite.to(
浏览 0提问于2017-10-03得票数 0
4回答
Onclick after effects动画(bodymovin.js) ID无反应
javascript、jquery、svg
我有一个在某些路径上的ID的后效bodymovin.js SVG动画(附图)。我已经在这些(cursor:pointer)上添加了一些css样式，它们工作得很好，但是使用jquery onClick进行重定向似乎不起作用。知道为什么吗？ 动画本身在按下按钮后开始的覆盖中。 重定向代码： <script>
$(function() {
document.getElementById("replay").onclick = function () {
location.href = "www.yoursite.com"
浏览 131提问于2017-07-17得票数 0
回答已采纳
3回答
从技术角度(没有隐喻)，我很难确切地理解min-x和min-y在viewBox上的工作原理。
我花了很多时间在两个有用的资源上：
(官方规范)-
- Soueidan
根据
“viewBox”属性的值是一个由四个数字组成的列表，用空格和/或逗号分隔，它们指定用户空间中的一个矩形，该矩形应该映射到给定元素建立的视图端口的边界，同时考虑到属性‘_
和：
“viewBox”属性的效果是用户代理自动提供适当的转换矩阵，以将用户空间中指定的矩形映射到指定区域(通常是视口)的边界。
和：
(注意:在某些情况下，用户代理除了规模转换外，还需要提供翻译转换。例如，在最外
浏览 1提问于2018-12-02得票数 10
回答已采纳
1回答
用适当的viewBox值替换宽度和高度属性
javascript、html、svg
有助于理解viewBox的目的，但并不完全相同。
目的是用相应的viewBox属性替换SVG元素的宽度和高度属性。我们的代码要求设置viewBox，而不是宽度和高度。
有没有一种算法方法可以做到这一点？
例如，下面的SVG元素用0 0 6 6的viewBox属性替换时看起来不一样。
原始
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='6' height='6'>
<rect w
浏览 0提问于2019-08-03得票数 0
2回答
理解svg的viewbox属性
css、html、svg
我正在尝试使用土耳其的地图，它是在之前创建的。
我更改了svg元素的尺寸
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
width="800"
height="600"
style="shape-rendering:geometricPrecision;
text-rendering:geometricPrecision;
image-rendering:op
浏览 1提问于2014-09-05得票数 3
1回答
svg viewbox缩放问题
svg、coordinates、viewbox
我对svg的viewbox有一个问题，在我看来，它就像是无限svg平面上的一个窗口，它的边界是在svg元素的viewBox属性中设置的。它表示svg平面中两个坐标之间的矩形。因此，viewBox "0 0 1000 500“显示了svg plan的(0,0)和(1000,500)之间的窗口。当我创建viewBox (2000，0,3000 500)时，我会看到(2000,0)和(3000,500)的窗口。X和y缩放没有修改:在这两种情况下，我都显示了svg平面的1000 * 500个单位。
但很明显，我在某些地方犯了错。我正在尝试动画viewbox来模拟某种类型的滚动条显示，保持y坐标
浏览 0提问于2012-01-13得票数 2
回答已采纳
1回答
改变SVG视口的高度会改变viewBox起始点<min>
css、svg、coordinate-systems
改变视点的坐标系高度，改变用户的坐标系，在X轴上起始点，我不明白为什么。这里的关系是什么？它不应该影响用户坐标系的Y轴，因为我们正在改变视口的高度(Y轴)？
视口坐标系: 1250x1250。用户坐标系: 500x500。当高宽比是这样时，我给viewBox属性(viewBox = <min-x> <min-y> <width> <height>) min-x of viewbox的宽度和高度总是从屏幕左侧的0开始。但是，如果我将视口坐标系统更改为1250x329，那么0值的min-x将从屏幕中间的某个地方开始，而不是从左侧开始。为什么会这样呢？
浏览 4提问于2020-09-21得票数 1
回答已采纳
1回答
SVG viewbox总是相对于它的大小吗？
html、css、svg
一个非常简单的例子，如果我有这个正方形的SVG：
<svg class="svg-correct-symbol" viewBox="0 0 442.533 442.533"
width="50px" height="50px">
我将其更改为：
<svg class="svg-correct-symbol" viewBox="0 0 200 200"
width="50px" height="50px">
我会看到图像的
浏览 4提问于2017-02-08得票数 3
回答已采纳
2回答
在SVG <animate>上使用viewBox本身只工作两次
xml、animation、svg、smil
我一直试图在SVG viewBox上使用两种不同的动画来在大小之间循环，但是尽管这两种动画都独立工作，但是如果第一种动画在它之后再次开始，第二种动画将不会运行。对我来说，奇怪的是，第一个动画会继续运行，这表明它“识别”了另一个动画的结尾，尽管它没有显示出来。如果我删除“small.end”，它甚至会以他们认为to....but的方式运行，这意味着他们不会一个接一个地重复。
<svg viewBox = "0 0 300 300">
<animate id = "big" attributeName = "viewBox"
浏览 2提问于2014-04-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
