iOS开发-CABasicAnimation实现小球左右摆动动画效果

这篇具有很好参考价值的文章主要介绍了iOS开发-CABasicAnimation实现小球左右摆动动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

iOS开发-CABasicAnimation实现小球左右摆动动画效果

之前开发中遇到需要实现小球左右摆动动画效果,这里作下记录。

一、效果图

iOS开发-CABasicAnimation实现小球左右摆动动画效果,移动开发,iphone开发,Objective-c,ios,小球摆动,基础动画

二、实现代码

2.1 CABasicAnimation

CABasicAnimation基础动画,包括duration、repeatCount、repeatDuration、beginTime、timingFunction、autoreverses、fromValue、toValue、byValue、byValue等属性。

具体可以查看

https://blog.csdn.net/gloryFlow/article/details/131991202

2.2 实现小球摆动动画

小球摆动动画主要实现

CABasicAnimation *animation = [CABasicAnimation animation];
    //动画运动的方式,现在指定的是围绕Z轴旋转
    animation.keyPath = @"transform.rotation.z";

完整代码如下

#import "INBallSwingView.h"
#import "UIColor+Addition.h"

static CGFloat rollSize = 50.0;

@implementation INBallSwingView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor colorWithHexString:@"efeff4"];
        
        _animationImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
        _animationImageView.backgroundColor = [UIColor clearColor];
        [self addSubview:_animationImageView];
        
        _lineImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
        _lineImageView.backgroundColor = [UIColor blueColor];
        [_animationImageView addSubview:_lineImageView];
        
        _rollImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, rollSize, rollSize)];
        _rollImageView.backgroundColor = [UIColor redColor];
        _rollImageView.layer.cornerRadius = rollSize/2;
        _rollImageView.layer.masksToBounds = YES;
        [_animationImageView addSubview:_rollImageView];
        
        // 锚点(0 - 1)
        self.animationImageView.layer.anchorPoint = CGPointMake(0.5, 0);
    }
    return self;
}

- (id)init {
    return [self initWithFrame:CGRectZero];
}

- (void)layoutSubviews {
    [super layoutSubviews];    
    self.animationImageView.frame = CGRectMake((CGRectGetWidth(self.bounds) - 200)/2, 200, 200, 200);
    
    self.rollImageView.frame = CGRectMake((CGRectGetWidth(self.animationImageView.frame) - rollSize)/2, CGRectGetHeight(self.animationImageView.frame) - rollSize, rollSize, rollSize);
    
    self.lineImageView.frame = CGRectMake((CGRectGetWidth(self.animationImageView.frame) - 1.0)/2, 5.0, 1.0, CGRectGetMinY(self.rollImageView.frame) - 10.0);
}

- (void)startAnimation {
    //初始化一个动画
    CABasicAnimation *animation = [CABasicAnimation animation];
    //动画运动的方式,现在指定的是围绕Z轴旋转
    animation.keyPath = @"transform.rotation.z";
    //动画持续时间
    animation.duration = 1.0;
    //开始的角度
    animation.fromValue = [NSNumber numberWithFloat:-M_PI/4];
    //结束的角度
    animation.toValue = [NSNumber numberWithFloat:M_PI/4];
    //动画的运动方式
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    //是否反向移动动画
    animation.autoreverses = YES;
    
    animation.repeatCount = MAXFLOAT;
    //动画的代理
//    baseAnimation2.delegate = self;
    //动画结束后的状态
    animation.fillMode = kCAFillModeBoth;
    
    [animation setValue:@"roll" forKey:@"roll"];
    
    [self.animationImageView.layer addAnimation:animation forKey:@"roll"];
}

@end

三、小结

iOS开发-CABasicAnimation实现小球左右摆动动画效果。

学习记录,每天不停进步。文章来源地址https://www.toymoban.com/news/detail-614553.html

到了这里,关于iOS开发-CABasicAnimation实现小球左右摆动动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Element】实现基于 Element UI el-tabs 的左右滑动动画

    在构建现代 web 应用时,为用户提供平滑的动画效果是提升用户体验的关键。本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画。 首先,我们需要创建一个基础的 el-tabs 组件,用于展示不同的内容区域。 我们希望了解用户是向左

    2024年03月14日
    浏览(34)
  • iOS开发-聊天emoji表情与自定义动图表情左右滑动控件

    iOS开发-聊天emoji表情与自定义动图表情左右滑动控件 之前开发中遇到需要实现聊天emoji表情与自定义动图表情左右滑动控件。使用UICollectionView实现。 UICollectionView是一种类似于UITableView但又比UITableView功能更强大、更灵活的视图,这是源于它将UICollectionView对cell的布局交给了

    2024年02月15日
    浏览(40)
  • CSS 使用 SVG 绘制动态皮筋与小球交互动画

    使用 animation 控制 SVG 的 path 属性执行动画 使用 CSS 设置 SVG 部分属性 实现上述代码后,页面效果如下: 完成上述代码后,皮筋就可以开始运动,效果图如下: 完成上述代码后就可以完成所有效果。 完整代码下载

    2024年04月12日
    浏览(32)
  • iOS实现弹簧放大动画

    效果图 实现代码

    2024年02月06日
    浏览(22)
  • iOS开发-下拉刷新动画依次渐隐渐显Indicator指示器效果

    iOS开发-下拉刷新动画依次渐隐渐显Indicator指示器效果 之前开发中实现下拉刷新动画三个球依次渐隐渐显指示器效果。 CABasicAnimation类的使用方式就是基本的关键帧动画。 所谓关键帧动画,就是将Layer的属性作为KeyPath来注册,指定动画的起始帧和结束帧,然后自动计算和实现

    2024年02月15日
    浏览(25)
  • android:RecyclerView交互动画(上下拖动,左右滑动删除)

    @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { //监听侧滑;1.删除数据,2.调用adapter.notifyItemRemoved(position) mMoveCallback.onItemRemove(viewHolder.getAdapterPosition()); } //改变选中的Item @Override public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { //判断状态 if

    2024年04月12日
    浏览(29)
  • 前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度

    前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:           #### 使用方法 ```使用方法 swiperTabList: [\\\"2023-06-10\\\",\\\"2023-06-11\\\",\\\"2023-06-12\\\",\\\"2023-06-13\\\",\\\"2023-06-14\\\",\\\"2023-06-15\\\"], //导航列表 swiperTabIdx:

    2024年02月08日
    浏览(36)
  • C++图形开发(4):下落的小球

    首先,我们来使小球自上而下依次出现: 分析 :要使小球自上而下依次出现,也就是指在一个小球出现之后让程序暂停一段时间,再执行下一步操作。 这就需要用到Sleep()函数了 Sleep()函数的作用是使当前线程暂停执行一段时间,让出CPU给其他线程或进程使用,以达到节约资

    2024年02月12日
    浏览(30)
  • C++图形开发(3):静止的小球(fillcircle函数)

    要实现在图形界面得到一个小球,我们的graphics库提供了一个函数: 其格式为: 现写一段代码,在图形界面生成一个小球: 效果: 坐标图: 如果是多个小球呢? 效果: 坐标图: 可不可以在上面的基础上增加一些花样呢? 我们先把设计图画出来:(本人字丑,请忽略) 代码

    2024年02月12日
    浏览(27)
  • C++图形开发(8):空格键控制小球起跳

    我们今天来实现下按下空格键控制小球的起跳( 还没阅读之前文章的同学可以先去阅读一下:C++图形开发专栏) 首先,我们要绘制小球,这里就不细讲啦,之前的文章里都有,新内容看一下注释: 运行效果: 我们要让小球跳起来,其实就是让小球y方向的坐标发生变化,如

    2024年02月12日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包