iOS使用 CABasicAnimation 实现简单的跑马灯(无cpu暴涨)

网上找了几个,但都有cup暴涨的情况发生,于是利用CABasicAnimation 简单的实现一个跑马灯,实现简单,可自己定制

#import <UIKit/UIKit.h>

@interface LoopView : UIView
@property(nonatomic,strong)NSString *Iformation;
@property(nonatomic,strong)NSString *Image;
@end
#import "LoopView.h"
#import "UIImageView+WebCache.h"
@interface LoopView(){
  UILabel *AD;
  UIImageView *headImage;
  CABasicAnimation *animation;
   CABasicAnimation *animationhead;
}
@end
@implementation LoopView
-(instancetype)initWithFrame:(CGRect)frame{

  self = [super initWithFrame:frame];
  if (self) {
    AD = [[UILabel alloc]initWithFrame:CGRectMake(28*WPSCREEN_WIDTH_RATIO, 0, self.frame.size.width, self.frame.size.height)];
    [self addSubview:AD];

    AD.textColor = TJXColor(146, 152, 169);
    AD.font = [UIFont fontWithName:@"Gotham-Book" size:12*WPSCREEN_WIDTH_RATIO];
    AD.textAlignment = NSTextAlignmentLeft;
    headImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 20*WPSCREEN_WIDTH_RATIO, 20*WPSCREEN_WIDTH_RATIO)];

    [self addSubview:headImage];

    headImage.layer.cornerRadius = 10;
    headImage.layer.masksToBounds = YES;

    [self sssss];
    [self headimage];
  }
  return self;
}
-(void)setIformation:(NSString *)Iformation{
    AD.text =Iformation;
}
-(void)setImage:(NSString *)Image{

   [headImage sd_setImageWithURL:[NSURL URLWithString:Image]];
}
-(void)sssss{

  animation = [CABasicAnimation animationWithKeyPath:@"position"];
  // 动画选项的设定
  animation.duration = 2; // 持续时间
  animation.repeatCount = MAXFLOAT; // 重复次数
  animation.removedOnCompletion = NO;
  animation.autoreverses = NO;
  // 起始帧和终了帧的设定
  animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(AD.layer.position.x, 30*WPSCREEN_HIGTH_RATIO)]; // 起始帧
  animation.toValue = [NSValue valueWithCGPoint:CGPointMake(AD.layer.position.x, AD.layer.position.y-20*WPSCREEN_HIGTH_RATIO)]; // 终了帧
  // 添加动画
  [AD.layer addAnimation:animation forKey:@"AnimationMoveY"];
//  [headImage.layer addAnimation:animation forKey:@"AnimationMoveY"];

}
-(void)headimage{
  animationhead = [CABasicAnimation animationWithKeyPath:@"position"];
  // 动画选项的设定
  animationhead.duration = 2; // 持续时间
  animationhead.repeatCount = MAXFLOAT; // 重复次数
  animationhead.removedOnCompletion = NO;
  animationhead.autoreverses = NO;
  // 起始帧和终了帧的设定
  animationhead.fromValue = [NSValue valueWithCGPoint:CGPointMake(headImage.layer.position.x, 30*WPSCREEN_HIGTH_RATIO)]; // 起始帧
  animationhead.toValue = [NSValue valueWithCGPoint:CGPointMake(headImage.layer.position.x, headImage.layer.position.y-20*WPSCREEN_HIGTH_RATIO)]; // 终了帧
  // 添加动画
  [headImage.layer addAnimation:animationhead forKey:@"AnimationMoveY"];

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS 实现跑马灯效果的方法示例

    在网页开发当中跑马灯是常用到的,用来显示通知等,在游戏开发当中也如此. 首先来看看效果图: 接下来就简单看看这效果是怎么实现的. 实现方法 1.首先我们从这个图片里面能联想到如果实现这个效果必然需要使用到动画,或者还有有用scrollView的思路,这里我是用的动画的方式实现的. 2..h文件 自定义一个继承UIView的LGJAutoRunLabel类,在.h文件中: @class LGJAutoRunLabel; typedef NS_ENUM(NSInteger, RunDirection

  • iOS使用 CABasicAnimation 实现简单的跑马灯(无cpu暴涨)

    网上找了几个,但都有cup暴涨的情况发生,于是利用CABasicAnimation 简单的实现一个跑马灯,实现简单,可自己定制 #import <UIKit/UIKit.h> @interface LoopView : UIView @property(nonatomic,strong)NSString *Iformation; @property(nonatomic,strong)NSString *Image; @end #import "LoopView.h" #im

  • vue实现简单的跑马灯效果

    本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 效果图 代码 html <div id="app"> <button @click="start">开启</button> <button @click="stop">停止</button> <p>{{msg}}</p> </div> vue var app = new

  • WPF实现简单的跑马灯效果

    最近项目上要用到跑马灯的效果,和网上不太相同的是,网上大部分都是连续的,而我们要求的是不连续的. 也就是是,界面上就展示4项(展示项数可变),如果有7项要展示的话,则不断的在4个空格里左跳,当然,衔接上效果不是很好看. 然后,需要支持点击以后进行移除掉不再显示的内容. 效果如下: 思路大致如下: 1.最外层用一个ViewBox,为了可以填充调用此控件的地方,这样可以方便自动拉伸 复制代码 代码如下: <Viewbox x:Name="viewbox_main" Height=&q

  • Vue实现简单的跑马灯

    Vue实现滚动字条/跑马灯,供大家参考,具体内容如下 内容不多,直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../资料/js/vue.js"></script> <!-- 引入V

  • 微信小程序实现简单文字跑马灯

    本文实例为大家分享了微信小程序实现文字跑马灯 的具体代码,供大家参考,具体内容如下 效果如图 WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" style="transform: translat

  • Vue实现简易跑马灯效果

    本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下 一个简单的跑马灯效果,就是如下这种效果 Vue跑马灯效果: 1.分析 a.点击"加油"按钮绑定一个点击事件,使用v-on或者缩写:"@"b.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可:为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定

  • 学习iOS全局跑马灯

    本文实例为大家分享了iOS全局跑马灯制作方法,供大家参考,具体内容如下 思路: 1.创建一个单例 + (instancetype)shareManager { static CCPaomaView *pModel = nil; static dispatch_once_t once; dispatch_once(&once, ^{ pModel = [[CCPaomaView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, 0.0468 *K

  • jQuery+CSS3文字跑马灯特效的简单实现

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&

  • Javascript实现跑马灯效果的简单实例

    页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel

随机推荐