十年網站開發(fā)經驗 + 多家企業(yè)客戶 + 靠譜的建站團隊
量身定制 + 運營維護+專業(yè)推廣+無憂售后,網站問題一站解決
今天起為大家?guī)韎OS動畫特效合集,APP如美女,動畫如衣裳,別讓你家的美女再裸奔了,趕緊為她披上漂亮的衣裝吧!
成都創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都做網站、成都網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣等服務,滿足客戶于互聯(lián)網時代的洛浦網站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴!
廢話不多說,直接上效果:
親喜歡的話就直接帶走吧:
順便給個贊哦!(*  ̄3)(ε ̄ *)
下面進入正題,是時候展現(xiàn)真正的技術了:
首先在控制器里添加一個scrollView,再在scrollView上的對應位置上添加要展示的imageView(立方體視圖組),當然也可以放上其它子控制器的view實現(xiàn)更多功能這個隨意不是重點
監(jiān)聽scrollView的滑動事件,在這里要先獲取到顯示的當前頁、上一頁、下一頁,然后讓這三個頁面同時做3DTransform變換
這里記得要復原一下3D變換,不然滑快了會出現(xiàn)頁面錯亂
對了,記得添加一個很重要的透視變換函數(shù),核心在于仿射矩陣的m34屬性,這樣才會產生遠小近大的3D效果,讓動畫更炫酷
這一期就到這里了,親們有什么意見和問題記得及時反饋哦,喜歡的話點個關注給個贊(づ ̄3 ̄)づ╭?~
這個效果是我參考 微信讀書 做的,給了我實現(xiàn)這個動畫的靈感。
這個動畫的原理也應該很容易能看出來:
1、動畫開始前,兩個疊在一起的view,上面一層是書本的封面,下面一層是書的第一頁。
2、開始動畫時,封面會進行兩個動畫,一個是縮放動畫,一個是旋轉動畫(繞Y軸旋轉90度);書頁僅執(zhí)行縮放動畫。
3、結束動畫時,封面view離開了屏幕,書頁全屏展示。
接下來,只需要實現(xiàn)UINavigationControllerDelegate,傳入一個遵循UIViewControllerAnimatedTransitioning這個協(xié)議的id類型對象就可以了。
下面是這個對象的實現(xiàn),核心的動畫部分就是我上面提到的思路。
demo地址
篇一:iOS 8自定義動畫轉場上手指南
iOS 5發(fā)布的時候,蘋果針對應用程序界面的設計,提出了一種全新的,革命性的方法—Storyboard,它從根本上改變了現(xiàn)有的設計理念。iOS 5之前,每個視圖控制器通常都伴有一個Interface Builder的文件,叫nib或者xib,這個想法比較簡單:每個視圖控制器的界面應該在各自的nib文件中設計,而所有的nib文件一起構成了整個應用程序的界面。一方面,這個是很方便的,因為它強迫開發(fā)者在界面設計的時候將注意力集中在界面上,但另一方面,到最后,太多的文件不得不被創(chuàng)建,開發(fā)者將不能概覽應用的整體界面。
隨著storyboard的產生,上面的這些都成為了歷史,因為這種新方法受到了開發(fā)者社區(qū)的廣泛使用。相比老的技術,storyboards提供了三個重要的優(yōu)勢:
整個界面設計只發(fā)生在一個文件里。項目的總文件數(shù)量大大減少了,特別是在大項目里。當然你可以使用額外的nib文件,并且允許只創(chuàng)建輔助視圖。
開發(fā)者能即時瀏覽應用的界面和流程。 視圖控制器之間的轉換(界面設計的專業(yè)術語叫場景(scene)),以及轉換是如何發(fā)生的,在storyboard中已被完美地定義并清楚地呈現(xiàn)給了開發(fā)者。
綜上所述,場景之間的轉換構成storyboard的特殊部分,我們一般把它叫做轉場(segue)。
轉場跟應用的導航和處理是密切相關的,因為它明確定義了一個視圖切換到另一個視圖的轉換細節(jié)。這些細節(jié)指定了是否應用動畫,動畫的類型,當然還有實際轉換時的準備和性能。除此之外,轉場也用來將傳遞數(shù)據(jù)到下一個視圖控制器里,這個用法也很常見。
從編程的角度看,場景是UIStoryboardSegue類的一個對象,它第一次在iOS 5中介紹到。和其它類的對象
不同的是,這種對象不能直接的創(chuàng)建或使用。不過你可以指定轉場的屬性,然后在轉場即將發(fā)生時提供給它以達到目的。UIKit框架提供了一些帶默認動畫過渡的預定義的轉場,包括:push segues(包括導航控制器的app),帶有動畫選擇的模態(tài)轉場(modal segues), popover segues。更高級的情況下,iOS SDK默認的轉場可能不夠用,所以開發(fā)者必須實現(xiàn)他們的自定義轉場(custom segues)。 創(chuàng)建一個自定義轉場并不難,因為它是iOS標準編程技術的組成部分。實際上你只需要生成UIStoryboardSegue的子類,并重載一個叫perform的方法即可。這個perform方法中必須實現(xiàn)自定義動畫的邏輯。從一個視圖控制器轉換到另一個以及返回操作的觸發(fā),也需要由開發(fā)者編程提供,這是一個標準的步驟。 在本教程中,我的目標是向你們展示如何實現(xiàn)自定義轉場,并通過一個簡單的演示應用介紹這個概念的所有方面。擁有創(chuàng)建自定義轉場的知識, 可以將你導
向開發(fā)更強大的app的道路。此外,對于最大化用戶體驗,并開發(fā)引人注目的漂亮應用,自定義轉場也很有幫助。 如果你有興趣學習我剛剛說的話,就一起來探索教程里的`所有細節(jié)和自定義轉場的奧秘吧。
應用程序概述不像我之前幾個教程提供了一個啟動項目,本教程我們將從頭開始創(chuàng)建app。事實上,我是故意這么做的,因為,項目中一些重要部分需要用到Interface Builder,所以我認為從頭開始按部就班的來做,能讓你看清里面的細節(jié)。
正如我先前所說,我們將開發(fā)一個非常簡單的app,在這個應用中我們將創(chuàng)建兩個自定義轉場。需要提前說明的是,我們的演示應用將有三個視圖控制器,也就是在Interface Builder中有三個場景和三個相關類。默認情況下,第一個是由Xcode創(chuàng)建的,因此我們只要再添加兩個。我們將創(chuàng)建的自定義轉場用來導航第一個視圖控制器到第二個
(以及返回),以及從第一個到第三個(以及返回)。第二個和第三個視圖控制器之間我們不添加任何聯(lián)系。
因此,我們需要創(chuàng)建兩個自定義轉場。因為要包括返回,每一個轉場需要創(chuàng)建兩個對應的類(因此,共四個):第一個類里我們將實現(xiàn)從第一個視圖控制器到另一個轉換的所有自定義邏輯。第二個類實現(xiàn)返回到第一個視圖控制器的邏輯,或者換句話說要實現(xiàn)解除轉場(unwind segue)。后面會講到解除轉場,現(xiàn)在只需要記住這就是用來讓我們返回到前一個視圖控制器的轉場。
視圖控制器本身沒什么需要做的。我們會用一個label注明視圖控制器的名稱,每一個會有一個不同的背景顏色,可以讓我們很容易地查看轉換(是的,這將是一個五顏六色的應用)。第一個和第二個視圖控制器也會多一個label,其中從其他視圖控制器傳來的自定義的消息將被顯示出來。
最后,轉場將在以下的動作發(fā)生的時候
篇二:Swift常用UIView Animation API使用
Swift常用UIView Animation API使用
本文默認讀者有基礎動畫編寫能力
參數(shù)解釋
*如解釋有誤,請指出,謝謝*
1 duration: 動畫執(zhí)行時間
2 delay:動畫延遲執(zhí)行時間
3 options:
.Repeat:動畫永遠重復的運行
.Autoreverse:動畫執(zhí)行結束后按照相反的行為繼續(xù)執(zhí)行。該屬性只能和.Repeat屬性組合使用
.CurveLinear:動畫做線性運動
.CurveEaseIn:動畫緩慢開始,然后逐漸加速
.CurveEaseOut:動畫迅速開始,在結束時減速
.CurveEaseInOut:動畫慢慢開始,然后加速,在結束之前減速.TransitionNone:沒有轉場動畫
.TransitionFlipFromTop :從頂部圍繞水平軸做翻轉動畫 .TransitionFlipFromBottom:從底部圍繞水平軸做翻轉動畫
.TransitionFlipFromLeft :從左側圍繞垂直軸做翻轉動畫
.TransitionFlipFromRight:從右側圍繞垂直軸做翻轉動畫
.TransitionCurlUp:從下往上做翻頁動畫
.TransitionCurlDown :從上往下做翻頁動畫
.TransitionCrossDissolve:視圖溶解消失顯示新視圖動畫
4 usingSpringWithDamping:彈簧阻力,取值范圍為0.0-1.0,數(shù)值越小“彈簧”振動效果越明顯。
5 initialSpringVelocity:動畫初始的速度(pt/s),數(shù)值越大初始速度越快。但要注意的是,初始速度取值較高而時間較短時,也會出現(xiàn)反彈情況。普通動畫
animateWithDuration:delay:options:animations:completion: class func animateWithDuration(_ duration: NSTimeInterval,
delay delay: NSTimeInterval,
options options: UIViewAnimationOptions,
animations animations: () - Void,
completion completion: ((Bool) - Void))
Animate changes to one or more views using the specified duration, delay, options, and completion handler.
對一個或者多個視圖按照相應參數(shù)做固定動畫(翻譯純屬個人見解,有錯請指出)
animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:
class func animateWithDuration(_ duration: NSTimeInterval,
delay delay: NSTimeInterval,
usingSpringWithDamping dampingRatio: CGFloat,
initialSpringVelocity velocity: CGFloat,
options options: UIViewAnimationOptions,
animations animations: () - Void,
completion completion: ((Bool) - Void))
Performs a view animation using a timing curve corresponding to the motion of a physical spring.
對一個視圖按照相應參數(shù)做彈性動畫(類似于彈簧,翻譯純屬個人見解,有錯請指出)
圖片借鑒Renfei Song's Blog,只為更清楚的展示調用兩個API的不同效果
Spring Animation 和普通的動畫的運動曲線的對比:
Spring Animation, Ease-Out Animation 和 Linear Animation 的動畫效果:
轉場動畫
transitionWithView:duration:options:animations:completion: class func transitionWithView(_ view: UIView,
duration duration: NSTimeInterval,
options options: UIViewAnimationOptions,
animations animations: (() - Void),
completion completion: ((Bool) - Void))
Creates a transition animation for the specified container view.為指定的視圖構建一個過渡動畫(翻譯純屬個人見解,有錯請指出)transitionFromView:toView:duration:options:completion:
class func transitionFromView(_ fromView: UIView,
toView toView: UIView,
duration duration: NSTimeInterval,
options options: UIViewAnimationOptions,
completion completion: ((Bool) - Void))
Creates a transition animation between the specified views using the given parameters.
在兩個給定視圖之間構建過渡動畫(翻譯純屬個人見解,有錯請指出)
以上為UIView Animation的基礎動畫API,使用其實很簡單,就是要理解不同參數(shù)的意義。
篇三:iOS開發(fā)學習之核心動畫
核心動畫基本概念
基礎動畫(CABasicAnimation)
關鍵幀動畫(CAKeyframeAnimation)
動畫組
轉場動畫-CATransition
UIView的轉場動畫-雙視圖
一、核心動畫基本概念
1.導入QuartzCore.framework框架
開發(fā)步驟
1).初始化一個動畫對象(CAAnimation)并且設置一些動畫相關屬性
2).CALayer中很多屬性都可以通過CAAnimation實現(xiàn)動畫效果,包括:opacity、position、transform、bounds、contents等(可以在API文檔中搜索:CALayer Animatable Properties)
3).添加動畫對象到層(CALayer)中,開始執(zhí)行動畫
4).通過調用CALayer的addAnimation:forKey增加動畫到層(CALayer)中,這樣就能觸發(fā)動畫。通過調用removeAnimationForKey可以停止層中的動畫
5).Core Animation的動畫執(zhí)行過程都是后臺操作的,不會阻塞主線程
2.屬性
1).duration:動畫的持續(xù)時間
2).repeatCount:重復次數(shù)(HUGE_VALF、MAX FLOAT無限重復)
3).repeatDuration:重復時間(用的很少)
4).removedOnCompletion:默認為Yes。動畫執(zhí)行完后默認會從圖層刪除掉
5).fillMode
6).biginTime
7).timingFunction:速度控制函數(shù),控制動畫節(jié)奏
8).delegate
二、基礎動畫(CABasicAnimation)
如果只是實現(xiàn)簡單屬性變化的動畫效果,可以使用UIView的塊動畫替代基本動畫
1.屬性說明
-fromValue:keyPath相應屬性值的初始值
-toValue:keyPath相應屬性的結束值
2.動畫過程說明:
-隨著動畫的就行,在duration的持續(xù)時間內,keyPath相應的屬性值從fromValue漸漸變?yōu)閠oValue
-keyPath內容是CALayer的可動畫Animation屬性
-如果fillMode=kCAFillModeForwards同時removedOnCompletion=NO,那么在動畫執(zhí)行完畢后,圖層會保持顯示動畫執(zhí)行后的狀態(tài),但在實質上,圖層的屬性值還是動畫執(zhí)行前的初始值,并沒有真正改變
3.代碼實現(xiàn)
位移需要考慮目標點設定的問題
1.將動畫的所有方法封裝到一個類里面
MyCAHelper.h
#import
#import
#define kCAHelperAlphaAnimation @"opacity"; ?// 淡入淡出動畫 #define kCAHelperScaleAnimation @"transform.scale";// 比例縮放動畫
#define kCAHelperRotationAnimation @"transform.rotation";// 旋轉動畫
#define kCAHelperPositionAnimation @"position"; // 平移位置動畫
@interface MyCAHelper : NSObject
#pragma mark - 基本動畫統(tǒng)一調用方法
+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationTypeduration:(CFTimeInterval)duration from:(NSValue *)from
to:(NSValue *)to
autoRevereses:(BOOL)autoRevereses;
#pragma mark - 關鍵幀動畫方法
#pragma mark 搖晃動畫
+ (CAKeyframeAnimation
*)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration
angle:(CGFloat)angle
repeatCount:(CGFloat)repeatCount;
#pragma mark 貝塞爾路徑動畫
+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)durationpath:(UIBezierPath *)path;
#pragma mark 彈力仿真動畫
+ (CAKeyframeAnimation *)myKeyBounceAnimationFrom:(CGPoint)from
to:(CGPoint)to
duration:(CFTimeInterval)duration;
@end
MyCAHelper.m
#import "MyCAHelper.h"
@implementation MyCAHelper
#pragma mark - 基本動畫統(tǒng)一調用方法
+ (CABasicAnimation *)myBasicAnimationWithType:(NSString *)animationTypeduration:(CFTimeInterval)duration
from:(NSValue *)from
to:(NSValue *)to
autoRevereses:(BOOL)autoRevereses
{
// 1. 實例化一個CA動畫對象
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:animationType];
// 2. 設置動畫屬性
[anim setDuration:duration];
[anim setFromValue:from];
[anim setToValue:to];
[anim setAutoreverses:autoRevereses];
return anim;
}
#pragma mark - 關鍵幀動畫方法
#pragma mark 搖晃動畫
+ (CAKeyframeAnimation
*)myKeyShakeAnimationWithDuration:(CFTimeInterval)duration
angle:(CGFloat)angle
repeatCount:(CGFloat)repeatCount
{
// 1. 初始化動畫對象實例
CAKeyframeAnimation *anim = [CAKeyframeAnimation
animationWithKeyPath:@"transform.rotation"];
// 2. 設置動畫屬性
[anim setDuration:duration];
[anim setValues:@[@(angle), @(-angle), @(angle)]];
[anim setRepeatCount:repeatCount];
return anim;
}
#pragma mark 貝塞爾路徑動畫
+ (CAKeyframeAnimation *)myKeyPathAnimationWithDuration:(CFTimeInterval)duration path:(UIBezierPath *)path
{
// 1. 初始化動畫對象實例
CAKeyframeAnimation *anim = [CAKeyframeAnimation
animationWithKeyPath:@"position"];
// 2. 設置動畫屬性
[anim setDuration:duration];
CATransition類實現(xiàn)層的轉場動畫。你可以從一組預定義的轉換或者通過提供定制的CIFilter實例來指定轉場效果。
//定義個轉場動畫
CATransition *animation = [CATransition animation];
//轉場動畫持續(xù)時間
animation.duration = 0.2f;
//計時函數(shù),從頭到尾的流暢度???
animation.timingFunction=UIViewAnimationCurveEaseInOut;
//轉場動畫類型
animation.type = kCATransitionReveal;
//轉場動畫將去的方向
animation.subtype = kCATransitionFromBottom;
//動畫時你需要的實現(xiàn)
self.tabBarController.tabBar.hidden = YES;
//添加動畫 (轉場動畫是添加在層上的動畫)
self.tabBarController.tabBar.layer addAnimation:animation forKey:@"animation"];
說明:
duration:動畫持續(xù)的時長。
timingFunction:沒明白(誰明白的說明一下吧)
type:轉場動畫的類型。如果在一個自定義的轉場動畫中指定的過濾器屬性,此屬性將被忽略。
type共有四種類型:
NSString * const kCATransitionFade;//逐漸消失
NSString * const kCATransitionMoveIn;//移入
NSString * const kCATransitionPush;//平移(暫且這么稱呼吧)
NSString * const kCATransitionReveal;//顯露
默認類型為kCATransitionFade。
subtype:轉場動畫將要去往的方向。
subtpye有四種類型:
NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
默認方向是nil。
[self.tabBarController.tabBar.layer addAnimation:animation forKey:@"animation"];
轉場動畫是添加給layer的!
switch (btn.tag) {
case 0:
animation.type = @"cube";//---立方體
break;
case 1:
animation.type = @"suckEffect";//103 吸走的效果
break;
case 2://前后翻轉效果
animation.type = @"oglFlip";//When subType is "fromLeft" or "fromRight", it's the official one.
break;
case 3:
animation.type = @"rippleEffect";//110波紋效果
break;
case 4:
animation.type = @"pageCurl";//101翻頁起來
break;
case 5:
animation.type = @"pageUnCurl";//102翻頁下來
break;
case 6:
animation.type = @"cameraIrisHollowOpen ";//107//鏡頭開
break;
case 7:
animation.type = @"cameraIrisHollowClose ";//106鏡頭關
break;
default:
break;
}
下邊有整體效果,希望能幫助到你!
定義一個視圖
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
一、圖片旋轉三種方式:
第一種:根據(jù)CGPathAddArc 繪畫圖片旋轉路線:
/*
1、#CGMutablePathRef? _Nullable path# 路線
2、確定圓心#CGFloat x# #CGFloat y#
3、半徑#CGFloat radius#
4、起點 #CGFloat startAngle# 結束 #CGFloat endAngle#
*/
CGPathAddArc(path, NULL, self.view.center.x, self.view.center.y, 0.1, 0, M_PI *2, 1);
CAKeyframeAnimation * frameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
frameAnimation.path= path;
CGPathRelease(path);
frameAnimation.delegate=self;
frameAnimation.duration=10;// 持續(xù)時間
frameAnimation.repeatCount = -1;// 重復次數(shù) 如果為0表示不執(zhí)行,-1表示不限制次數(shù),默認為0
frameAnimation.autoreverses=NO;
frameAnimation.rotationMode = kCAAnimationRotateAuto;// 樣式
frameAnimation.fillMode = kCAFillModeForwards;
[self.imageView.layeraddAnimation:frameAnimationforKey:nil];
第二種:
[UIView animateWithDuration:20.0f animations:^{
? ? if (self.imageView) {
? ? ? ?self.imageView.transform = CGAffineTransformMakeRotation(M_PI*5);
?}
}];
第三種:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//默認是順時針效果,若將fromValue和toValue的值互換,則為逆時針效果
animation.fromValue = [NSNumber numberWithFloat:0.f];
animation.toValue = [NSNumber numberWithFloat: M_PI *2];
animation.duration=30;
animation.autoreverses=NO;
animation.fillMode = kCAFillModeForwards;
animation.repeatCount = MAXFLOAT; //如果這里想設置成一直自旋轉,可以設置為MAXFLOAT,否則設置具體的數(shù)值則代表執(zhí)行多少次
[self.imageView.layer addAnimation:animation forKey:nil];
持續(xù)旋轉:
@property(nonatomic,assign) double angle;
CGAffineTransform endAngle = CGAffineTransformMakeRotation(self.angle * (M_PI / 180.0f));
[UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
? ? self.imageView.transform= endAngle;
}completion:^(BOOLfinished) {
? ? self.angle+=10;
? ? [self startAnimation2];// 上邊任意一種方法回調
}];
// 當視圖停止轉動時調用此方法重新轉動
-(void)endAnimation {
self.angle+=4;
[self startAnimation2];
}
二、水波紋動畫
屬性定義:幾個波紋定義幾個X 寬度可以用一個 也可以分開定義
@property (weak, nonatomic) IBOutlet UIView *backView;
@property(nonatomic,strong) CAShapeLayer * waterLayer1;
@property(nonatomic,strong) CAShapeLayer * waterLayer2;
@property(nonatomic,assign) CGFloat x;
@property(nonatomic,assign) CGFloat y;
@property(nonatomic,assign) CGFloat waveHeight;
@property(nonatomic,assign) CGFloat waveWidth;
@property(nonatomic,assign) int speedWave;
@property(nonatomic,assign) CGFloat waveAmplitude;
@property(nonatomic,assign) int speed;
@property(nonatomic,assign) CGFloat speed_H;
@property(nonatomic,assign) CGFloat offsetXT;
-(instancetype)init {// 給個初始值,下邊被除數(shù)不能為0
if (self == [super init]) {
self.speedWave = 3;
self.waveAmplitude = 3;
self.speed=3;
self.waveWidth = self.backView.frame.size.width;
self.waveHeight = self.backView.frame.size.height;
self.speed_H = self.backView.frame.size.height-20;
}
return self;
}
-(void)waterAnimation {
//? ? CGFloat y = _waveHeight*sinf(2.5*M_PI*i/_waveWidth + 3*_offset*M_PI/_waveWidth + M_PI/4) + _h;
self.waterLayer1 = [CAShapeLayer layer];
self.waterLayer1.fillColor = [UIColor yellowColor].CGColor;
[self.backView.layer addSublayer:self.waterLayer1];
self.waterLayer2 = [CAShapeLayer layer];
self.waterLayer2.fillColor = [UIColor redColor].CGColor;
[self.backView.layer addSublayer: self.waterLayer2];
//創(chuàng)建一個新的 CADisplayLink 對象,把它添加到一個runloop中,并給它提供一個 target 和selector 在屏幕刷新的時候調用
//CADispayLink相當于一個定時器 會一直繪制曲線波紋 看似在運動,其實是一直在繪畫不同位置點的余弦函數(shù)曲線
CADisplayLink * waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave)];
[waveDisplayLinkaddToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
-(void)getCurrentWave {
// x位置
self.x+=self.speed;
//聲明第一條波曲線的路徑
CGMutablePathRef path = CGPathCreateMutable();
//設置起始點
CGPathMoveToPoint(path,nil,0,self.waveHeight);
CGFloaty =0.f;
//第一個波紋的公式
for(floatx =0.f; x =self.waveWidth; x++) {
? ? y =self.waveAmplitude*sin((200/self.waveWidth) * (x *M_PI/70) -self.x*M_PI/170) +self.speed_H*1;
? ? CGPathAddLineToPoint(path,nil, x, y);
? ? x++;
}
//把繪圖信息添加到路徑里
CGPathAddLineToPoint(path, nil, self.waveWidth, self.backView.frame.size.height);
CGPathAddLineToPoint(path, nil, 0, self.backView.frame.size.height);
//結束繪圖信息
CGPathCloseSubpath(path);
self.waterLayer1.path= path;
//釋放繪圖路徑
CGPathRelease(path);
[self? ? X2];
}
/// 第二條水波
-(void)X2 {
self.offsetXT += self.speedWave;
CGMutablePathRef pathT = CGPathCreateMutable();
CGPathMoveToPoint(pathT,nil,0,self.waveHeight+50);
CGFloatyT =0.f;
for(floatx =0.f; x =self.waveWidth; x++) {
? ? yT =self.waveAmplitude*1.6*sin((200/self.waveWidth) * (x *M_PI/100) -self.offsetXT*M_PI/170) +self.waveHeight;
? ? CGPathAddLineToPoint(pathT,nil, x, yT-10);
}
CGPathAddLineToPoint(pathT, nil, self.waveWidth, self.backView.frame.size.height);
CGPathAddLineToPoint(pathT, nil, 0, self.backView.frame.size.height);
CGPathCloseSubpath(pathT);
self.waterLayer2.path= pathT;
CGPathRelease(pathT);
}
三、脈沖效果動畫
@property (weak, nonatomic) IBOutlet UIView *pulseView;
@property(nonatomic,strong) CAShapeLayer * pulseLayer;
-(void)pulseAnimation {
CGFloat width = self.pulseView.bounds.size.width;
self.pulseLayer = [CAShapeLayer layer];
self.pulseLayer.bounds=CGRectMake(0,0, width, width);
self.pulseLayer.position=CGPointMake(width/2, width/2);
self.pulseLayer.backgroundColor = [UIColor clearColor].CGColor;
self.pulseLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.pulseLayer.bounds].CGPath;
self.pulseLayer.fillColor = [UIColor colorWithRed: 0.3490196078 green:0.737254902 blue:0.8039215686 alpha:1].CGColor;
self.pulseLayer.opacity = 0.0;
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.bounds=CGRectMake(0,0, width, width);
replicatorLayer.position=CGPointMake(width/2, width/2);
replicatorLayer.instanceCount=4;// 復制層
replicatorLayer.instanceDelay=1;/// 頻率
[replicatorLayeraddSublayer:self.pulseLayer];
[self.pulseView.layeraddSublayer:replicatorLayer];
[self.pulseView.layerinsertSublayer:replicatorLayeratIndex:0];
}
-(void)startPulseAnimation {
CABasicAnimation * opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.fromValue=@20;// 起始值 (strong 修飾的id值)
opacityAnimation.toValue=@30;// 結束值(strong 修飾的id值)
CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.0, 0.0, 0.0)];
scaleAnimation.toValue =[NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 1.0)];
CAAnimationGroup * groupAnimation = [CAAnimationGroup animation];
groupAnimation.animations=@[opacityAnimation, scaleAnimation];
groupAnimation.duration=20;
groupAnimation.autoreverses=NO;
groupAnimation.repeatCount=HUGE;
[self.pulseLayeraddAnimation:groupAnimationforKey:nil];
}
在此附上效果:
聽說有好得三方庫,我還沒有去找過,歡迎各位大佬推薦一個優(yōu)質的三方。。。。。
喜歡的朋友點個贊唄!
使用CABAsicAnimation來實現(xiàn)動畫的放縮和旋轉是比較常用的,這篇主要介紹CABasicAnimation實現(xiàn)簡單的動畫效果
最終的效果圖為:
Demo地址
對應的實現(xiàn)文件是SecondViewController
首先,我們先定義一個UIView以及三個button按鈕,分別對應平移、放大和旋轉
在.h文件中定義相應的屬性
之后,在.m文件中實現(xiàn)相應的懶加載
將UIView以及button添加到界面上
之后,我們先來實現(xiàn)平移動畫,實現(xiàn)下面的方法
這里面遇到挺多坑的,下面逐條說明一下
接下倆,我們類似添加相應的放大和旋轉的動畫效果
這樣,我們就完成了CABasicAnimation實現(xiàn)平移、放大和旋轉的動畫效果
這種動畫效果使用挺多的
另外,我們閱讀蘋果開發(fā)文檔時,我們可以看到協(xié)議CAAnimationDelegate,通過這個協(xié)議我們可以觀察動畫的開始和結束。
在平移動畫中,讓CABasicAnimation遵守這個協(xié)議
實現(xiàn)相應的協(xié)議方法
比較重要的是,我們通過協(xié)議方法可以判斷動畫是否正常完成還是被打斷,這個我以前就碰到過動畫過程被UITableView 的reloadData打斷,導致動畫表現(xiàn)異常,具體可以看下這篇文章
CAnimationGroup動畫執(zhí)行時間比duration小
)
最終效果圖為:
Demo地址
我寫的同一系列的其他文章
iOS開發(fā)中動畫效果的探究(一)
iOS動畫效果的探究二:UIView Animation實現(xiàn)動畫
iOS動畫效果三:CABAsicAnimation實現(xiàn)平移、旋轉和放大
ios動畫效果四:使用Pop框架實現(xiàn)彈簧效果
iOS動畫效果五:CABasicAnimation實現(xiàn)繞定點旋轉的效果 ]
iOS動畫效果六:實現(xiàn)自定義的push轉場動畫
iOS動畫效果七:實現(xiàn)自定義present轉場動畫效果
iOS動畫效果八:實現(xiàn)類似系統(tǒng)的測滑返回效果