欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

《Motion Design for iOS》(四十二)

程序员文章站 2022-04-24 22:19:08
构建立即响应的按钮 你玩过loren brichter的游戏letterpress吗?我很喜欢的loren构建的一个关于界面的东西可能不是每个人都明显喜欢的:我喜欢每个按钮在用户按下时立即切换到一个...

构建立即响应的按钮

你玩过loren brichter的游戏letterpress吗?我很喜欢的loren构建的一个关于界面的东西可能不是每个人都明显喜欢的:我喜欢每个按钮在用户按下时立即切换到一个不同的状态的样子。绝对不会延迟。这不是一个简单实现的行为,因为即使你可以将一个图片设为uibutton的uicontrolstatehighlighted状态图,它也只会在点击发生后一小会启动,而且它不允许更进一步的代码来运行它。如果我想要在用户点击一个uibutton后立即运行一个动画,我就不得不自己写一个简单的自定义按钮类。但首先,先来看一看我们要构建的是什么。


《Motion Design for iOS》(四十二)


如果我想要在用户点击后立即运行代码,我就不得不自己写一个好的uibutton子类,这样我就可以重写一些方法,即 -touchesbegan:withevent: 和 -touchesended:withevent:。ios中的每个界面的控制都从uiresponder继承了这些方法,它是一个处理所有触摸控制事件的父类。有了子类,我就可以塞一些自己的代码来在这些方法启动的时候运行。来看看dtctestbutton的实现文件,这是我们的按钮子类,会为我们处理一些魔法。

#import "dtctestbutton.h"
#import "pop.h"

@implementation dtctestbutton

- (void)touchesbegan:(nsset *)touches withevent:(uievent *)event {
    // 自定义一些按钮第一次被点击时要运行的代码

    [super touchesbegan:touches withevent:event];
}

- (void)touchesended:(nsset *)touches withevent:(uievent *)event {
    // 自定义一些按钮不再被点击时要运行的代码

    [super touchesended:touches withevent:event];
}

@end

我们这里只定义了两个方法,我们想要将我们的代码放到这些方法里面去。当子类化一个苹果提供的对象,比如uibutton时,做一个好的城市居民并确保调用super的关于这些方法的实现是很重要的,因为我们不知道苹果在这两个方法中需要运行什么代码,而且不想破坏按钮的默认行为。我们调用super后,就可以在这两个方法中添加任何我们想要的行为。

让我们添加一个pop动画到 -touchesbegan:withevent:中去。

popspringanimation *scale = [self pop_animationforkey:@"scale"];

if (scale) {
    scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(0.8, 0.8)];
} else {
    scale = [popspringanimation animationwithpropertynamed:kpopviewscalexy];
    scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(0.8, 0.8)];
    scale.springbounciness = 20;
    scale.springspeed = 18.0f;
    [self pop_addanimation:scale forkey:@"scale"];
}

这和我们之前写的pop代码有点不同。当使用pop来构建好的响应动画去关联触摸动作时,一个聪明的做法是看看是否已经有一个pop动画关联到这个视图或者layer了。如果有,只要更新已经存在的动画的tovalue属性就可以了。pop知道当前的值是什么并且已经设置好弹性和速度变量了,所以你不用做任何其他的事情。这避免了添加另一个错误的pop动画来操作同样的值(在这个例子中,是kpopviewscalexy),这会造成愚蠢的结果。通过使用现存的动画,pop可以优雅地从它的当前位置修改到你设置的新的tovalue并进行一个漂亮、平滑的过度。这也是为什么pop动画有一个名字:这样你就可以通过给出你之前设置的动画的名字来询问视图或者layer它们是否有已经添加进去的pop动画并获取到动画对象。

如果动画不是已经存在,我们就和平常一样创建一个新的pop动画对象,设置弹簧的动作属性,比如弹性,设置tovalue,然后添加动画到视图或者layer上。在这个例子中,我们动画了视图的尺寸,所以我们将动画添加到视图上。

现在让我们在触摸事件结束时做同样的事情。这次代码放在 -touchesended:withevent:中。

popspringanimation *scale = [self pop_animationforkey:@"scale"];

if (scale) {
    scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(1.0, 1.0)];
} else {
    scale = [popspringanimation animationwithpropertynamed:kpopviewscalexy];
    scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(1.0, 1.0)];
    scale.springbounciness = 20;
    scale.springspeed = 18.0f;
    [self pop_addanimation:scale forkey:@"scale"];
}

如果你看看触摸事件开始时0.8的tovalue以及触摸结束时的1.0的tovalue,你就可以猜到整个动画会在用户点击按钮时稍微收缩按钮的尺寸,然后会在他们停止触摸时弹回完整的尺寸。完全正确!这里是它现在的样子。


《Motion Design for iOS》(四十二)


很有意思!让我们再加一点点旋转动画来增色。它基本上和我们已经添加的代码一样,只是重复它,修改动画类型,然后改变tovalue值。这里是完整的代码,以及一些注释。

// 当用户开始点击时立即调用
- (void)touchesbegan:(nsset *)touches withevent:(uievent *)event {    
    // 看动画是否已经被添加到视图或者layer上
    popspringanimation *scale = [self pop_animationforkey:@"scale"];
    popspringanimation *rotate = [self.layer pop_animationforkey:@"rotate"];

    // 如果scale动画已经存在,就设置tovalue
    if (scale) {
        scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(0.8, 0.8)];
    } else {
        // 如果不存在,就创建并添加它
        scale = [popspringanimation animationwithpropertynamed:kpopviewscalexy];
        scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(0.8, 0.8)];
        scale.springbounciness = 20;
        scale.springspeed = 18.0f;
        [self pop_addanimation:scale forkey:@"scale"];
    }

    // 如果旋转动画已经存在,就设置tovalue
    if (rotate) {
        rotate.tovalue = @(m_pi/6); // 旋转到1/6th π角度
    } else {
        // 旋转动画时layer上的,所以我们添加到layer上去
        rotate = [popspringanimation animationwithpropertynamed:kpoplayerrotation];
        rotate.tovalue = @(m_pi/6);
        rotate.springbounciness = 20;
        rotate.springspeed = 18.0f;

        // 添加到layer上,而不是view
        [self.layer pop_addanimation:rotate forkey:@"rotate"];
    }

    [super touchesbegan:touches withevent:event];
}

// 在用户离开手指时立即调用
- (void)touchesended:(nsset *)touches withevent:(uievent *)event {
    // 看动画是否存在(由于这是用户离开时,基本是已经存在的)
    popspringanimation *scale = [self pop_animationforkey:@"scale"];
    popspringanimation *rotate = [self pop_animationforkey:@"rotate"];

    if (scale) {
        // 拉伸回1.0的完整尺寸
        scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(1.0, 1.0)];
    } else {
        scale = [popspringanimation animationwithpropertynamed:kpopviewscalexy];
        scale.tovalue = [nsvalue valuewithcgpoint:cgpointmake(1.0, 1.0)];
        scale.springbounciness = 20;
        scale.springspeed = 18.0f;
        [self pop_addanimation:scale forkey:@"scale"];
    }

    if (rotate) {
        // 旋转回0角度的初始位置
        rotate.tovalue = @(0);
    } else {
        rotate = [popspringanimation animationwithpropertynamed:kpoplayerrotation];
        rotate.tovalue = @(0);
        rotate.springbounciness = 20;
        rotate.springspeed = 18.0f;

        // 再次确保添加你的layer动画到layer上去。我曾经失误过很多次,这会导致一个有趣的bug :)
        [self.layer pop_addanimation:rotate forkey:@"rotate"];
    }

    [super touchesended:touches withevent:event];
}

动画代码是重复的。简单,但是重复。它的一个缺点是需要很多行代码来完整构建你的动画,但优点是能让你练习写很多动画代码,所以我认为你可以学的更快。

再一次,这里是我们构建的最终动画。它是一个很有趣的效果,会在用户点击按钮时立即启动,它会让你的界面感觉响应很快。这里的弹性效果很显著,所以当添加动画到你的真实app界面时,去使用一会app的动画,并确保它们的速度和动作时合适且不分散注意力的。


《Motion Design for iOS》(四十二)


现在让我们来用pop做一些有趣的东西!