3

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 のラップについては、コーディングでどこにも行きませんでした...

4

1 に答える 1