CAShapeLayer
パスを使用してアニメーション化する方法についてもっと学ぼうとしています。最初に頭に浮かんだのは、跳ね返る前にエッジに「圧縮された」テニスボールの効果があることでした。
しかし、レイヤーの を使用するのではなく、fillPath
このレイヤーに画像を設定しようとしました。そこで、別の を作成CALayer
し、そのコンテンツ プロパティに画像を割り当て、シェイプ レイヤーのパスをアニメーション化しました。
しかし、その結果、イメージがこのパス内に完全にラップされるのではなく、パスがアニメーション化されると、パスがアニメーション化されると、イメージが明らかになり、カバーされるようになります。
この画像をパスで完全にラップできるようにしたいと思います。パスがアニメーション化されているため、形状に関係なく、画像は形状レイヤーのこのパス内にラップされたままです。ここでは画像の歪みは問題になりません。
私が念頭に置いていたのは、たとえば、ダウンロードしたテニスボールの画像を持ち、それをCAShapeLayer
逆さまの涙のようなパスで包み込み(写真を参照)、小さな逆さまの涙の形から大きな逆さまにアニメーション化することです- ティア ドロップを下に移動し、最終的に円を表示します (テニス ボールのイメージ)。
を使用してこれを達成することは可能CAShapeLayer
ですか? こちらでサンプルをいただけますか?前もって感謝します。
コードの追加:
こんにちは、これは私がこれまでに得たものです(@lnafzigerに感謝)
//Setting up layer
- (void)setupLayer
{
self.caShapeLayer = [CAShapeLayer layer];<
self.caLayer = (CALayer*) self.layer;
self.caLayer.contents = (id)([UIImage imageNamed:"@yellowTennisBall.png"] CGImage]);
self.caLayer.mask = self.caShapeLayer;
}
//Animate the path of CAShapeLayer
- (void)bounce
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 1.7;
animation.repeatCount = HUGE_VAL;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = (__bridge id)[self defaultPath];
animation.toValue = (__bridge id)[self compressedPath];
animation.autoreverses = YES;
[self.caShapeLayer addAnimation:animation forKey:@"animatePath"];
}
前述の効果とパス内の UIImage のラップについては、コーディングでどこにも行きませんでした...