是否可以从 Lottie 动画视图中获取图层属性?
这是我想做的一个简单的例子:
Lottie Animation & UIImage to target
我有一个 Lottie 动画(在 After Effects 中制作),包含 2 个动画图层——一个圆圈和一个星星。我有一个可移动的 UIImageView——分配了一个目标图像。
import UIKit
import Lottie
class ViewController: UIViewController {
// OUTLETS
@IBOutlet weak var lottieView: UIView!
@IBOutlet weak var targetImage: UIImageView!
var animationView = LOTAnimationView()
func loadAnimation() {
animationView = LOTAnimationView(name: "StackOverflow")
animationView.frame = CGRect(x: 0, y: 0, width: 1024, height: 576)
animationView.contentMode = .scaleAspectFit
animationView.loopAnimation = true
lottieView.addSubview(animationView)
animationView.play()
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self.view)
if targetImage.frame.contains(location) {
targetImage.center = location
}
}
}
override func viewDidLoad() {
super.viewDidLoad()
loadAnimation()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
这是本示例中使用的 StackOVerflow.json-File 的代码:
{
"v":"4.10.1",
"fr":50,
"ip":0,
"op":500,
"w":1024,
"h":576,
"nm":"stackOverflowExample",
"ddd":0,
"assets":[
],
"layers":[
{
"ddd":0,
"ind":1,
"ty":4,
"nm":"Formebene 2",
"sr":1,
"ks":{
"o":{
"a":0,
"k":100,
"ix":11
},
"r":{
"a":0,
"k":0,
"ix":10
},
"p":{
"a":1,
"k":[
{
"i":{
"x":0.833,
"y":0.833
},
"o":{
"x":0.167,
"y":0.167
},
"n":"0p833_0p833_0p167_0p167",
"t":0,
"s":[
512,
288,
0
],
"e":[
512,
465,
0
],
"to":[
0,
0,
0
],
"ti":[
0,
0,
0
]
},
{
"i":{
"x":0.833,
"y":0.833
},
"o":{
"x":0.167,
"y":0.167
},
"n":"0p833_0p833_0p167_0p167",
"t":250,
"s":[
512,
465,
0
],
"e":[
512,
288,
0
],
"to":[
0,
0,
0
],
"ti":[
0,
0,
0
]
},
{
"t":499
}
],
"ix":2
},
"a":{
"a":0,
"k":[
0,
0,
0
],
"ix":1
},
"s":{
"a":0,
"k":[
100,
100,
100
],
"ix":6
}
},
"ao":0,
"shapes":[
{
"ty":"gr",
"it":[
{
"ty":"sr",
"sy":1,
"d":1,
"pt":{
"a":0,
"k":5,
"ix":3
},
"p":{
"a":0,
"k":[
0,
0
],
"ix":4
},
"r":{
"a":0,
"k":0,
"ix":5
},
"ir":{
"a":0,
"k":64.322,
"ix":6
},
"is":{
"a":0,
"k":0,
"ix":8
},
"or":{
"a":0,
"k":128.645,
"ix":7
},
"os":{
"a":0,
"k":0,
"ix":9
},
"ix":1,
"nm":"Sternengruppe-Pfad: 1",
"mn":"ADBE Vector Shape - Star",
"hd":false
},
{
"ty":"st",
"c":{
"a":0,
"k":[
0.521385043275,
0.521385043275,
0.521385043275,
1
],
"ix":3
},
"o":{
"a":0,
"k":100,
"ix":4
},
"w":{
"a":0,
"k":16,
"ix":5
},
"lc":1,
"lj":1,
"ml":4,
"nm":"Kontur 1",
"mn":"ADBE Vector Graphic - Stroke",
"hd":false
},
{
"ty":"tr",
"p":{
"a":0,
"k":[
222.969,
-51.672
],
"ix":2
},
"a":{
"a":0,
"k":[
0,
0
],
"ix":1
},
"s":{
"a":0,
"k":[
100,
100
],
"ix":3
},
"r":{
"a":0,
"k":0,
"ix":6
},
"o":{
"a":0,
"k":100,
"ix":7
},
"sk":{
"a":0,
"k":0,
"ix":4
},
"sa":{
"a":0,
"k":0,
"ix":5
},
"nm":"Transformieren"
}
],
"nm":"Sternengruppe 1",
"np":3,
"cix":2,
"ix":1,
"mn":"ADBE Vector Group",
"hd":false
}
],
"ip":0,
"op":500,
"st":0,
"bm":0
},
{
"ddd":0,
"ind":2,
"ty":4,
"nm":"Formebene 1",
"sr":1,
"ks":{
"o":{
"a":0,
"k":100,
"ix":11
},
"r":{
"a":0,
"k":0,
"ix":10
},
"p":{
"a":0,
"k":[
512,
288,
0
],
"ix":2
},
"a":{
"a":0,
"k":[
0,
0,
0
],
"ix":1
},
"s":{
"a":0,
"k":[
100,
100,
100
],
"ix":6
}
},
"ao":0,
"shapes":[
{
"ty":"gr",
"it":[
{
"d":1,
"ty":"el",
"s":{
"a":0,
"k":[
216.156,
216.156
],
"ix":2
},
"p":{
"a":0,
"k":[
0,
0
],
"ix":3
},
"nm":"Elliptischer Pfad 1",
"mn":"ADBE Vector Shape - Ellipse",
"hd":false
},
{
"ty":"st",
"c":{
"a":0,
"k":[
0.521385043275,
0.521385043275,
0.521385043275,
1
],
"ix":3
},
"o":{
"a":0,
"k":100,
"ix":4
},
"w":{
"a":0,
"k":16,
"ix":5
},
"lc":1,
"lj":1,
"ml":4,
"d":[
{
"n":"d",
"nm":"strich",
"v":{
"a":0,
"k":83,
"ix":1
}
},
{
"n":"g",
"nm":"abstand",
"v":{
"a":0,
"k":14,
"ix":2
}
},
{
"n":"o",
"nm":"versatz",
"v":{
"a":1,
"k":[
{
"i":{
"x":[
0.833
],
"y":[
0.833
]
},
"o":{
"x":[
0.167
],
"y":[
0.167
]
},
"n":[
"0p833_0p833_0p167_0p167"
],
"t":0,
"s":[
-6
],
"e":[
-395
]
},
{
"t":499
}
],
"ix":7
}
}
],
"nm":"Kontur 1",
"mn":"ADBE Vector Graphic - Stroke",
"hd":false
},
{
"ty":"tr",
"p":{
"a":0,
"k":[
-299.922,
-55.922
],
"ix":2
},
"a":{
"a":0,
"k":[
0,
0
],
"ix":1
},
"s":{
"a":0,
"k":[
100,
100
],
"ix":3
},
"r":{
"a":0,
"k":0,
"ix":6
},
"o":{
"a":0,
"k":100,
"ix":7
},
"sk":{
"a":0,
"k":0,
"ix":4
},
"sa":{
"a":0,
"k":0,
"ix":5
},
"nm":"Transformieren"
}
],
"nm":"Ellipse 1",
"np":3,
"cix":2,
"ix":1,
"mn":"ADBE Vector Group",
"hd":false
}
],
"ip":0,
"op":500,
"st":0,
"bm":0
}
]
}
现在我想检测目标图像是否与 Lottie 动画中的 2 层之一重叠。
要将 Target-UIImageView 与动画中形状的位置进行比较,我需要访问 Lottie 动画视图中的图层属性(帧或位置)。
我在 Lottie-Documentation 中没有找到任何东西——所以我不确定它是否可能。有人知道这是否可能吗?
如何访问 Lottie 动画中的图层属性?