如何在 iOS 中创建如下图所示的动画加载效果?有人请给我一个想法或指出我的任何例子。
问问题
4651 次
3 回答
22
我非常清楚这是如何工作的(我为 Shazam 工作并编写了这个动画)所以......
虽然我怀疑您是否想要一个具有 Shazam 版本所有细节的动画,但我将解释基本思想。
首先,动画由五个主要部分组成。
- 形成圆圈的 CAShapeLayer
- 一个 CABasicAnimation 让我们的动画保持及时
- 一个计时器,告诉我们的形状层重绘
- 一个遮罩层,它将旋转并遮盖我们的形状层
- 位于形状层顶部的徽标(不一定是 shazam)
所以首先创建 CAShapeLayer
CAShapeLayer *newPieLayer = [CAShapeLayer layer];
[newPieLayer setFillColor:[UIColor blackColor].CGColor];
[[self layer] addSublayer:newPieLayer];
return newPieLayer;
创建蒙版图层并将其添加到圆形图层,您的蒙版图像应该是一个从零 alpha 扫描到 100% alpha 的圆圈
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];
现在你应该有一些看起来非常相似的东西
于 2012-05-16T10:58:44.070 回答
1
iOS 中没有用于动画加载屏幕的功能。您所做的是在您的应用程序首次启动时创建一个视图,该视图最初显示加载图像。然后,您为该视图设置动画。
请不要这样做,除非你真的在加载一些东西。iOS 应用程序旨在尽快启动。加载屏幕旨在近似于您看到的第一个屏幕,以尽可能快地将用户定向到界面。它不是为了品牌目的。
于 2012-05-15T19:32:47.650 回答
0
嗨,为 monotouch 实现这个逻辑,你可以使用逻辑希望,这样你就可以得到你的解决方案
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
于 2012-06-05T13:15:51.020 回答