ios - Lottie AnimationView Layer Properties -
is possible layer properties out of lottie animationview?
here simple example, of want do:
lottie animation & uiimage target
i have lottie animation (made in after effects), containing 2 animated layers – circle , star. have moveable uiimageview – 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>, event: uievent?) { touch in touches { let location = touch.location(in: self.view) if targetimage.frame.contains(location) { targetimage.center = location } } } override func viewdidload() { super.viewdidload() loadanimation() // additional setup after loading view, typically nib. } override func didreceivememorywarning() { super.didreceivememorywarning() // dispose of resources can recreated. } } and here code of stackoverflow.json-file used in 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 want detect, if target image overlapping 1 of 2 layers in lottie animation.
to compare target-uiimageview position of shapes in animation, need access layer properties (frame or position) in lottie animationview.
i haven't found in lottie-documentation – not sure if possible. know if possible?
how access layer properties inside of lottie animation?
Comments
Post a Comment