ios - Shazam アプリのようなローディング画面

Question

iOS で下の画像のようなアニメーション化された読み込み効果を作成するにはどうすればよいですか? 誰かが親切に私にアイデアを与えたり、例を教えてくれます.

Answer 1

私はこれがどのように機能するかについて非常に良い考えを持っています (私は Shazam で働いており、このアニメーションを書きました) だから...

Shazam バージョンのすべての機微を備えたアニメーションを望んでいるとは思えませんが、基本的なアイデアを説明します。

まず、アニメーションは 5 つの主要な部分で構成されています。

1. 円を形成する CAShapeLayer
2. アニメーションを時間内に保つ CABasicAnimation
3. シェイプレイヤーに再描画を指示するタイマー
4. シェイプレイヤーを回転させてマスクするマスクレイヤー
5. 形状レイヤーの上にあるロゴ (shazam である必要はありません)

最初に CAShapeLayer を作成します

CAShapeLayer *newPieLayer = [CAShapeLayer layer];     

[newPieLayer setFillColor:[UIColor blackColor].CGColor];

[[self layer] addSublayer:newPieLayer];

return newPieLayer;

マスク レイヤーを作成し、それを円レイヤーに追加します。マスク イメージは、ゼロ アルファから 100% アルファまでスイープする円である必要があります。

self.maskLayer = [CALayer layer];
[self.maskLayer setBounds:self.bounds];
[self.maskLayer setPosition:CGPointMake(self.bounds.size.width/ 2, self.bounds.size.height/2)];
[self.maskLayer setContents:(id)[UIImage imageNamed:kMaskImageName].CGImage];

newPieLayer.mask = self.maskLayer;

同期を維持するアニメーションを作成し、マスク レイヤーに追加します。

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    anim.fromValue = [NSNumber numberWithFloat:startRadians];
    anim.toValue = [NSNumber numberWithFloat:M_PI * 2];
    anim.duration = timeInterval;
    anim.delegate = delegate;
    anim.TimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    [maskLayer addAnimation:anim forKey:kMaskRotationAnimationKey];

描画を開始するタイマーを作成して開始します

[NSTimer scheduledTimerWithTimeInterval:kAnimationFireRate target:self selector:@selector(updateTimerFired:) userInfo:nil repeats:YES];

タイマー コールバックでレイヤーのパスを設定します。

float rotation = [[[maskLayer presentationLayer] valueForKeyPath:@"transform.rotation.z"] floatValue];

decibelPath = CGPathCreateArc(animationCenter, inRadius, endAngle, rotation);

[self.layerOne setPath:decibelPath];

今、あなたは非常によく似たものを持っているはずです

Answer 2

iOSには、アニメーションのロード画面用の機能はありません。アプリケーションを最初に起動したときに、ロード中の画像を最初に表示するビューを作成します。次に、そのビューをアニメーション化します。

Please do not do this unless you are genuinely loading something. iOS applications are intended to start up as quickly as possible. The loading screen is intended to be an approximation of the first screen you see to orient the user to the interface as quickly as possible. It's not there for branding purposes.

Answer 3

こんにちは、モノタッチ用にこのロジックを実装します。ロジックの希望を使用して、ソリューションを取得できます

private UIImageView splashScreen;
public override void ViewDidLoad () {
#region Splash Screen
// get the Height & Width of device Screen
float mainSrcWidth = this.View.Bounds.Width;
float mainSrcHeight = this.View.Bounds.Height;
splashScreen = new UIImageView (UIImage.FromFile ("Images/loading.gif"));
splashScreen.Frame = new RectangleF (0, 0, mainSrcWidth, mainSrcHeight);    
//Start the thread;
ThreadPool.QueueUserWorkItem (delegate {
Load ();
}
        );
#endregion
#region Load() splashscreen
private void Load ()
{
        //Sleep for 5 seconds to simulate a long load.
Thread.Sleep (new TimeSpan (0, 0, 0, 5));
        this.BeginInvokeOnMainThread (delegate {
splashScreen.RemoveFromSuperview ();
            splashScreen = null;
            });
    }
    #endregion