Is it possible to get the Layer Properties out of a Lottie animationView?
Here is a simple example, of what i want to do:
Lottie Animation & UIImage to target
I have a Lottie Animation (made in After Effects), containing 2 animated Layers – a circle and a star. I have a moveable UIImageView – with a Target Image assigned.
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.
}
}
And here is the Code of the StackOVerflow.json-File used in this example:
{
"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
}
]
}
Now i want to detect, if the Target Image is overlapping with one of the 2 Layers in the Lottie Animation.
To compare the Target-UIImageView to the position of the shapes in the animation, i need to access the Layer Properties (frame or position) in the Lottie animationView.
I haven't found anything in the Lottie-Documentation – so I am not sure if it even is possible. Does somebody know if this is possible?
How do i access the Layer Properties inside of a Lottie Animation?