版本記錄
| 版本號 | 時間 |
|---|---|
| V1.0 | 2019.05.18 星期六 |
前言
iOS中有關視圖控件用戶能看到的都在UIKit框架里面屠阻，用戶交互也是通過UIKit進行的。感興趣的參考上面幾篇文章策菜。
1. UIKit框架（一） —— UIKit動力學和移動效果（一）
2. UIKit框架（二） —— UIKit動力學和移動效果（二）
3. UIKit框架（三） —— UICollectionViewCell的擴張效果的實現(xiàn)（一）
4. UIKit框架（四） —— UICollectionViewCell的擴張效果的實現(xiàn)（二）
5. UIKit框架（五） —— 自定義控件：可重復使用的滑塊（一）
6. UIKit框架（六） —— 自定義控件：可重復使用的滑塊（二）
7. UIKit框架（七） —— 動態(tài)尺寸UITableViewCell的實現(xiàn)（一）
8. UIKit框架（八） —— 動態(tài)尺寸UITableViewCell的實現(xiàn)（二）
9. UIKit框架（九） —— UICollectionView的數(shù)據(jù)異步預加載（一）
10. UIKit框架（十） —— UICollectionView的數(shù)據(jù)異步預加載（二）
11. UIKit框架（十一） —— UICollectionView的重用晶疼、選擇和重排序（一）
12. UIKit框架（十二） —— UICollectionView的重用、選擇和重排序（二）
13. UIKit框架（十三） —— 如何創(chuàng)建自己的側滑式面板導航（一）
14. UIKit框架（十四） —— 如何創(chuàng)建自己的側滑式面板導航（二）
15. UIKit框架（十五） —— 基于自定義UICollectionViewLayout布局的簡單示例（一）
16. UIKit框架（十六） —— 基于自定義UICollectionViewLayout布局的簡單示例（二）
17. UIKit框架（十七） —— 基于自定義UICollectionViewLayout布局的簡單示例（三）
18. UIKit框架（十八） —— 基于CALayer屬性的一種3D邊欄動畫的實現(xiàn)（一）
19. UIKit框架（十九） —— 基于CALayer屬性的一種3D邊欄動畫的實現(xiàn)（二）
需求說明
在APP中我們一般用UILabel控件展示文字又憨，由于手機物理設備尺寸的限制翠霍，很多時候文字卻很長，而控件的寬度是固定或者有限的蠢莺，所以就會有一個場景那就是類似跑馬燈似的顯示文字寒匙，本篇就是這樣的一個Demo，首先看一下運行起來的效果。
需求實現(xiàn)
下面我們就該需求的實現(xiàn)锄弱，首先看下sb中的內容
先看一下UILabel的父視圖容器的約束
下面看一下文字控件UILabel的展示
主要就是這兩個控件考蕾，再沒有其他的控件了。
接下來会宪，主要就是代碼了肖卧。
1. ViewController.m
#import "ViewController.h"
#define KScreenWidth [[UIScreen mainScreen] bounds].size.width
#define testContainerLeadingMargin 40.0
#define testContainerHeight 30.0
NSString * const kGiftLabelContentAnimationKey = @"kGiftLabelContentAnimationKey";
NSString * const kGiftLabelMoveAnimationKey = @"kGiftLabelMoveAnimationKey";
@interface ViewController () <CAAnimationDelegate>
@property (weak, nonatomic) IBOutlet UILabel *testLabel;
@property (weak, nonatomic) IBOutlet UIView *testLabelContainerView;
@property (nonatomic, assign) BOOL giftDescDirection; //禮物文字動畫出來的方向 0表示右邊 1表示左邊//禮物總時長
@property (nonatomic, assign) CGFloat animationDuration; //禮物總時長
@property (nonatomic, strong) CAAnimationGroup *giftLabelMoveInOutAnim;
@property (nonatomic, strong) CABasicAnimation *giftLabelContentAnimation;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *labelLeadingConstraint;
@end
@implementation ViewController
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
self.animationDuration = 6;
self.testLabel.text = @"跑馬燈跑這個是新的空間上你號后手守護搜這個可以顯示出來嗎護手霜破售后收獲禮物文字動畫出來";
self.testLabelContainerView.clipsToBounds = YES;
CGSize mSize = [self.testLabel sizeThatFits:CGSizeMake(MAXFLOAT, testContainerHeight)];
self.testLabel.frame = CGRectMake(0, 0, mSize.width + 5 + testContainerLeadingMargin * 2, testContainerHeight);
self.testLabelContainerView.frame = CGRectMake(0, 0, MIN(mSize.width + 5 + testContainerLeadingMargin * 2, KScreenWidth * 0.9), testContainerHeight);
CGSize labelSize = self.testLabel.frame.size;
[self doGiftLabelMoveInOutAnimationWithSize:labelSize];
self.giftLabelMoveInOutAnim.delegate = self;
[self.testLabelContainerView.layer addAnimation:self.giftLabelMoveInOutAnim forKey:kGiftLabelMoveAnimationKey];
[self doGiftLabelContentAnimationWithSize:labelSize];
self.giftLabelContentAnimation.delegate = self;
[self.testLabel.layer addAnimation:self.giftLabelContentAnimation forKey:kGiftLabelContentAnimationKey];
}
#pragma mark - Object Private Function
- (CABasicAnimation *)doGiftLabelContentAnimationWithSize:(CGSize)mSize
{
CABasicAnimation *contentAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
contentAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(mSize.width / 2, mSize.height / 2)];
CGFloat offsetX = MIN(KScreenWidth * 0.9 - mSize.width, 0);
contentAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(mSize.width / 2 + offsetX, mSize.height / 2)];
contentAnimation.beginTime = CACurrentMediaTime() + .5f;
contentAnimation.duration = 3.f;
contentAnimation.removedOnCompletion = NO;
contentAnimation.fillMode = kCAFillModeForwards;
self.giftLabelContentAnimation = contentAnimation;
return contentAnimation;
}
- (void)doGiftLabelMoveInOutAnimationWithSize:(CGSize)mSize
{
float beiginHeight = 0;
if ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortrait) {
beiginHeight = 104;
}else{
beiginHeight = 82;
}
// 平移動畫
CABasicAnimation *moveIn = [CABasicAnimation animationWithKeyPath:@"position"];
//右邊進入
if (self.giftDescDirection == 0) {
moveIn.fromValue = [NSValue valueWithCGPoint: CGPointMake(KScreenWidth+mSize.width/2, beiginHeight)];
}else{
moveIn.fromValue = [NSValue valueWithCGPoint: CGPointMake(-mSize.width/2, beiginHeight)];
}
moveIn.toValue = [NSValue valueWithCGPoint: CGPointMake(KScreenWidth/2, beiginHeight)];
moveIn.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
moveIn.duration = 0.5;
moveIn.removedOnCompletion = NO;
moveIn.fillMode = kCAFillModeForwards;
// 平移動畫
CABasicAnimation *moveOut = [CABasicAnimation animationWithKeyPath:@"position"];
if (self.giftDescDirection == 0) {
moveOut.toValue = [NSValue valueWithCGPoint: CGPointMake(-mSize.width/2, beiginHeight)];
}else{
moveOut.toValue = [NSValue valueWithCGPoint: CGPointMake(KScreenWidth+mSize.width/2, beiginHeight)];
}
moveOut.beginTime = self.animationDuration-0.5;
moveOut.duration = 0.5f; //動畫時長
moveOut.removedOnCompletion = NO;
moveOut.fillMode = kCAFillModeForwards;
moveOut.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
// 進入進出組動畫
self.giftLabelMoveInOutAnim = [CAAnimationGroup animation];
self.giftLabelMoveInOutAnim.animations = @[moveIn,moveOut];
self.giftLabelMoveInOutAnim.duration = self.animationDuration;
self.giftLabelMoveInOutAnim.fillMode = kCAFillModeForwards;
self.giftLabelMoveInOutAnim.removedOnCompletion = NO;
}
#pragma mark - CAAnimationDelegate
- (void)animationDidStart:(CAAnimation *)anim
{
NSLog(@"animationDidStart");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
NSLog(@"animationDidStop");
}
@end
這個效果其實還是很好實現(xiàn)的，類似跑馬燈一樣跑了一次掸鹅，如果大家想要一直循環(huán)跑的效果塞帐，后期我可以擴展，加上那種效果的實現(xiàn)巍沙。
后記
本篇主要講述了基于UILabel跑馬燈類似效果的實現(xiàn)葵姥，感興趣的給個贊或者關注~~~
