Autolayout实现基本动画(使用Masonry库)

在使用自动布局之前一直对自动布局的动画实现有怀疑。

有文章说不断更改布局带来的内存消耗很大。于是做了个测试动画的demo,发现完全木有问题啊

原生的约束写起来很麻烦,还好有Masonry和UIView-Autolayout这些库。

另外看了这位大神对使用Masonry介绍的文章,加上Masonry的demo,很快就会用了,多亏有这些大神们的分享精神。

#import "MASExampleUpdatingFrequentlyTest.h"
@interface MASExampleUpdatingFrequentlyTest()<UIScrollViewDelegate>
{
    UIScrollView *scrollview;
    UIView *runningScreen;
    UILabel *offsetLabel;
}

@end

@implementation MASExampleUpdatingFrequentlyTest
-(instancetype)init
{
    if (self = [super init]) {
        scrollview = [[UIScrollView alloc]init];
        scrollview.backgroundColor = [UIColor grayColor];
        scrollview.delegate = self;
        [self addSubview:scrollview];
        scrollview.contentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 1000);

        runningScreen = [UIView new];
        runningScreen.backgroundColor = [UIColor blackColor];
        [self addSubview:runningScreen];

        offsetLabel = [UILabel new];
        offsetLabel.textAlignment = NSTextAlignmentCenter;
        offsetLabel.text [email protected]"running boy!";
        offsetLabel.preferredMaxLayoutWidth = 300;
        offsetLabel.backgroundColor = [UIColor orangeColor];
        [runningScreen addSubview:offsetLabel];

        [scrollview mas_makeConstraints:^(MASConstraintMaker *make){
            make.edges.equalTo(self);
        }];
        [runningScreen mas_makeConstraints:^(MASConstraintMaker *make){
            make.width.equalTo(scrollview);
            make.height.equalTo(50);
            make.top.equalTo(self);
            make.leading.equalTo(self);
        }];
        [offsetLabel mas_makeConstraints:^(MASConstraintMaker *make){
            make.center.equalTo(runningScreen);
        }];
    }
    return self;
}

-(void)scrollViewDidScroll:(UIScrollView *)aScrollView
{
    CGFloat offsetY = aScrollView.contentOffset.y;
    NSLog(@"%f",offsetY);
    [runningScreen mas_updateConstraints:^(MASConstraintMaker *make){
        make.top.equalTo(offsetY);
    }];
    offsetLabel.text = [NSString stringWithFormat:@"You have run %.f ",offsetY];
    // tell constraints they need updating
    [runningScreen setNeedsUpdateConstraints];

    // update constraints now so we can animate the change
    [runningScreen updateConstraintsIfNeeded];
    [runningScreen updateConstraints];
}

思路主要是改变约束的top属性达到移动的效果。

其实这个库的demo列的情况已经很全了,都试着用一遍基本的应该没啥问题了

时间: 2024-10-15 14:55:06

Autolayout实现基本动画(使用Masonry库)的相关文章

iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三--纯代码的autoLayout及布局动画 一.引言 关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致.除了使用storyBoard进行布局约束的拖拽,有时我们也需要在代码中进行autolayout的布局设置,Masonry库可以方便的创建约束属性,实际上,我们也没有必要再使用系统原生的代码来创建和设置约束,这篇博客只作为使用的方法备忘.前几篇布局介绍的链接如下: 使用autoresizing进行界面布局:http://my.o

iOS Core Animation详解(四)AutoLayout中的动画

原创blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK详解专栏 http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html 前言:AutoLayout定义了View的位置,也就是说,在Auto Layout的工程里,如果不修改约束本身,在视图重新绘制的时候,还会回到最开始的位置.AutoLayout中的动画与视图的位置和大小有关. 先看看效果 实现过程 在Storyboard上拖拽一

推荐8个实现 SVG 动画的 JavaScript 库

SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaScript 库. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 1. W

10 个非常实用的 SVG 动画操作JavaScript 库

10 个非常实用的 SVG 动画操作JavaScript 库 SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级. Vivus Vivus 是一个能动画js类库,它能够给SVG图像显示出被画出来的过程.Vivus是没有其他类库依赖的(比如jQuery).你仅仅需要在页面中加入这个.js文件,然后传入需要被用来动画的

推荐几款制作网页滚动动画的 JavaScript 库

这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以让网站变得高大上起来. ScrollReveal.js ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画. 在线演示     立即下载 Sc

iOS Core Animation具体解释(四)AutoLayout中的动画

原创blog.转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html 前言:AutoLayout定义了View的位置,也就是说,在Auto Layout的project里,假设不改动约束本身,在视图又一次绘制的时候.还会回到最開始的位置.AutoLayout中的动画与视图的位置和大小有关. 先看看效果 实现过程 在Storyb

可视化CSS3动画代码生成js库插件-Bounce.js

简要教程 Bounce.js是一款功能非常强大的可视化CSS3动画代码生成js库插件.该js库插件提供了一个在线APP,通过该APP可以在可视化的条件下编辑CSS3的各种动画效果,如移动.旋转.倾斜.easing等效果,编辑完成后可以直接获取该CSS3帧动画的代码,复制代码到你的页面中即可在你的页面上获得与该动画一样的效果.此外,你也可以单独使用Bounce.js,通过js代码来完成各种CSS3动画效果.Bounce.js能与jQuery完美结合. 查看演示     下载插件 安装 可以通过Bo

Masonry库的使用

Github 简要 自动布局最重要的是约束:UI元素间关系的数学表达式.约束包括尺寸.由优先级和阈值管理的相对位置.它们是添加剂,可能导致约束冲突 .约束不足造成布局无法确定 .这两种情况都会产生异常. 使用前:AutoLayout关于更新的几个方法的区别 setNeedsLayout:告知页面需要更新,但是不会立刻开始更新.执行后会立刻调用layoutSubviews. layoutIfNeeded:告知页面布局立刻更新.所以一般都会和setNeedsLayout一起使用.如果希望立刻生成新的

move ---- 编写一个包含几种常用动画的js库

在操作dom元素的时候为了让网站显得更有活力或者某些想让人注意到, 经常需要用到一些小动画, 但常用的 jquery 库只有一种ease(先加速后减速的动画)运动方式的动画, 虽然这是很常用的动画, 但有时也会用到其他的, 最近写了一个集成几种常用动画的库, move.js , 如果不是走动画队列的话, 通常的动画库在进行一个动画的时候, 在对元素施加另一个动画就会马上停止当前动画, 马上执行新添加的动画, move动画库稍微修改了一下, 在新动画添加之后, 老动画还会继续跑, 两个动画会进行叠