app交互动画怎么做|App 启动页的动画怎么做


㈠ 带交互的 iOS 产品原型可以用什么软件制作

转载 首先如果你小团队或者个人开发,当然可以用Xcode,如果大公司跨部门审核调整各种,还是有个快速的原型。如你要求,可交互。包括常用的Axrue,我试用过下面提到的所有软件,分别完整产出过不同的原型,还有一些市面上的你一看它介绍图还在用ios6的就知道不必了,说明很久没更新了。下面这些是我按照不同的特点进行了归类,视你的具体情况而定吧。我在选择软件这个过程中纠结了很久,也是用过在领悟真正的原理。但是这段时间的摸索对我以后也有很大帮助。轻巧型低保真;无控件;iOS;少交互;免费。Pop非常火的一款原型软件,第一次满足了大家人人都是产品经理的感觉。方法:拍照–添加触控区–转场方式–选择图片平台:全手机操作缺点:分享不便。动画有如侧滑、展开、消失,快现的摇一摇。操作只可以单击。没有控件,所有东西都靠你的照片。Tapcase基本和pop一样,就是软件本身的UI更ios7一点,其他都一样,也是导入图片,加热区就好了。缺点也是一样的。**总结:**轻巧型的就是适合简单软件且是早期,在手机上稍微复杂一点的就痛不欲生了。但问题是,如果简单到这么轻松了,那真的还需要用软件模拟吗?真的在纸上画更轻松吧。点击这种交互也不需要模拟了吧。专业型高保真度;自带控件;Mac+iOS;全交互;收费+免费UIDesigner + UIDPlayer腾讯出品的原型软件,中文,操作简单,符合国人习惯,容易上手。方便分享。方法:windows电脑安装UIDesigner,使用现成控件进行可视化搭建,调试后通过网盘等方式发到iOS设备,用UIDPlayer打开即可。平台:只支持Win+ iOS。可能也是优点,仅有的专门支持Win平台的原型软件。缺点:吹毛求疵吧,逼格不高。Briefs + Briefscase这是我最近发现非常好的一款软件,好在对交互的支持上,如果调整细腻一点,几乎可以以假乱真。我是用它在UI定稿的情况下,提前当完成品测试交互体验的。当然也自带控件,用于原型设计。还有三种模式,场景模式(Scene View )和细节模式(Details View)分别负责交互设计和UI设计两个部分,在设计完成后可以在第三个模式(Overview)查看整个APP的架构。方法:在场景模式中,添加Actors(按钮,文本段落,文本热点)和Actions(触发动作),可以设置界面跳转时的TRANSITION效果,声效,延时,Retina 空间等交互体验辅助特效。然后在iOS设备上安装Briefscase,通过Dropbox同步后使用。缺点:贵。1298元,感受一下。标注起来还是不太趁手。通过dropbox同步有点慢,又没办法加快,只能生等。可以先试用一下,觉得好再入手吧。Blueprint + viewer我最早用的原型软件,现在制作出的原型已经出现在App Store里拉。Sakura Day。当时用免费的功能(2个项目,无法导入dropbox图片,无自定义控件)就做出来了。后来接手公司大项目,专门买了完整版128元。但是注意,这是用iPad做,iPhone或者iPad看,没有电脑版的。我当时就是为了地铁上可以用,是优点也是缺点。方法:基本都一样,就是在iPad上操作。触控不那么精确,但是操作体验很好,完整版的自定义库按钮很多很丰富。平台:iPad + iOS缺点:最重要的就是只能在iPad上编辑,我做了个大型的项目,打开还是稍慢点,但是稳定,操作多了有点累。分享需要对方装软件,而且生成的项目文件会很大。总结: 专业软件还有很多,各有千秋,这两个是最快支持iOS7的,说明他们很重视产品保证更新。但是价格确实也是不菲,优缺点很明显,不符合国人习惯。腾讯那个整体是很不错了,除非你和我一样只用mac。HTML型中保真度;自带控件;全平台;需联网;少交互;收费+免费Flinto在Flinto中快速制作iOS原型我是通过下面提到的Icon Stricker发现的这个网站,试用了一下发现,它的特点是快捷的热区和转场操作,但是完全不带控件,也就是网页版的 pop。需要你自己准备好图片,不管是UI还是UE,这里只负责交互。最大的亮点就是支持滚动,前面提到的那些软件,都需要通过转场实现长图滚动,这个可以原生支持。方法:传图,热区,转场。看起来操作很简单。平台:全平台。缺点:30天免费期,按月收费。不支持控件。需要浏览器支持。Fluii极简风格的Fluid UI快速原型图工具最受推崇的网页版原型网站。控件从iOS到Android到WP。也是可以免费一个项目少量屏幕,然后按月收费。方法:添加控件,热区,转场。缺点:我用网页版的还是感觉有点迟缓,不痛快。胜在控件实在很全,这个是很多桌面软件都不支持的。如果针对安卓或者WP,实在没什么更好的选择了。**总结:**分享方便,轻量级是最大优点。但是按月付费这个我觉得大公司不会承担这笔费用,小公司有没有必要花费在这方面都值得商榷。速度也确实有点问题。交互也不如专业型那么灵活。超大型高保真度;可拓展控件;自定义库;适配;少交互;收费。Axure绕不开的巨人,就像图片界的PS,文字界的Word。它最大的特点就是别人都用它(虽然大多是盗版),我之前也存了显出不同逼格的心试了前面那么多软件,最后绕了一大圈还是回到了它的怀抱。回来的原因主要有三大家都在用。这个没办法,沟通,传输,修改都方便,PC+mac都可以看。你自己逼格到了,人家都感受不了有什么用呢。确实强大,熟练使用库和自定义控件后,效率大幅提升,远胜专业型。生成的HTML页面自带左侧目录边栏。是的,这就是我弃用OmniGraffle的主要原因。方法:不再赘述了,总之要用好自定义控件,这个会让效率成倍提升。缺点:生成的原型在移动端很难用。是有方法的,其实也不错了,但是我还是懒得费心研究。之所以用这个就是为了给开发和写文档,很多标注和逻辑流程,没必要做出交互。所以不考虑用它做交互,你真都做成交互了,难道还要工程师挨个点开才能看到逻辑?OmniGraffle为了捍卫mac的逼格,我用了几天就放弃了。不可否认,OG在调整控件时的流畅稳健,草图的美观(前提是你用英文)等方面,能让你享受整个制作过程,这是很少见的。但是我一直搞不懂画布层共享层等等的关系,用起来失误频繁,而且,生成的html没有目录啊,文档可读性差。方法:不再赘述。缺点:除了前面所说,仅支持mac,生成的交互原型更难用到手机上。总结: 是的,这两个软件不光是用来做移动交互原型的,他们的强大体现在非常多的领域,但是针对移动交互原型而言,都不适合。A胜在文档和大家都用,所以在个方面就屈从了吧。辅助型特定功能(动画;图标;投影)Quartz Composer就是专门用来制作交互动画原型的产品,免费,但是需要苹果开发者账号,学习曲线非常高,但是可以制作非常精美的强交互动画。Facebook Paper的动画原型制作工具Origami及实现代码PopLiveviewPS play等都可以快速把电脑上的内容投影到手机上。但是唯独liveview可以支持交互。打开交互模式后,电脑端可以接受手机的点击和滑动手势。非常强大。Icon Stricker专门用来测试icon的网站,出自Flinto。快速在主屏查看图标。轻量级图标测试工具ICON STRIKE:快速主屏查看总结我现在对原型的流程是这样的:用Axure绘制UE图,导出成手机尺寸图片导入Briefs或者pop,加入交互,体验一下把UI图转成黑白,在Axure里标注,写文档,生成htmlUI定稿再导入briefs,高保真体验

㈡ App 启动页的动画怎么做

首先定下目标,我们要实现的是启动引导画面中的一种——多层次动画。然后我们需要设定一个动画的主题,我们需要表达我们的情感,或者抒情~或者动人~或者逗比~。当然这大部分是设计师的工作。

好吧,既然是demo,而我又不懂设计又不懂美学又不懂PS大法,那么,就大概也许做成一个这样子的把~~~

总结一下最终目标要有几个要点:

1、4个页。

2、每个页都可能有若干分层,动画速度不同。

3、整个滑动的手感应该是顺滑并且是页面式的。

三. 用什么控件做?

开头我讲过,这是要探索,而不是为了实现,所以绝对不能借助任何3rd的library来完成。最大限度的利用apple的原生控件,是解决问题之道。

So,我们当然选用UIScrollView咯~~~除非你是个手工控。。。就要用最基本的UIView实现一个类似的滑动效果的UIScrollView。

啥?你问我UIScrollView是啥?

。。。。。。

下面是UIScrollView的几个关键属性,我相信你是明白的。需要注意的是,伴随着scrollview的左右拖动,contentOffset是在一直变换的。数值范围:(0,0) – (320 * 3, 0)。而这个属性,是我们需要使用的关键数值。

uiscrollview_callouts_2x.png

四. 怎么做?

上面我啰嗦了半天,最后告诉大家要用UIScrollView做,那么问题来了,挖掘机技术哪家强?啊不,到底应该怎么做?下面是干货~

首先我们要把我们承载整个动画场面的scrollView造出来

如下,需要设置scrollView的几个关键属性:frame, contentSize, alwaysBounceHorizontal, paginEnabled(这个如果是NO,那么页面间的弹性效果就没了), delegate(需要设置从而获取scrollview的滚动状态)等等。

//初始化 scrollview

– (void)initScrollView

{

CGSize screenSize = [UIScreen mainScreen].bounds.size;

_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, screenSize.width, screenSize.height)];

//我们的scrollView的frame应该是屏幕大小

_scrollView.contentSize = CGSizeMake(screenSize.width * 4, screenSize.height);

//但是我们希望我们scrollView的可被展现区域是4个屏幕横排那么大

_scrollView.alwaysBounceHorizontal = YES;//横向一直可拖动

_scrollView.pagingEnabled = YES;//关键属性,打开page模式。

_scrollView.delegate = self;

_scrollView. = NO;//不要显示滚动条~

[self.view addSubview:_scrollView];

}

现在我们已经准备好了动画的画布,下面开始将每一页的元素加上去。

2. 加入页面元素

还是不要全篇幅贴代码了,以第一页为例把。

前面掉渣天的蛇鸡屎(我)的demo图已经表明,第一页,我们要有3个UILabel,一个UIImageView。

那么好,这些元素我们就给他声明出来。

@interface ViewController ()

@property (strong, nonatomic) UIScrollView *scrollView;//这是基本!

@property (strong, nonatomic) UIImageView *girlImageView;

@property (strong, nonatomic) UILabel *label_page1_1;

@property (strong, nonatomic) UILabel *label_page1_2;

@property (strong, nonatomic) UILabel *label_page1_3;

@end

然后把第一页的元素,加进来~

//为了更方便的初始化UILabel,我为UILabel增加了一个简易的类方法。是为了让代码更简洁可读。

+ (instancetype)labelWithText:(NSString *)text font:(UIFont *)font color:(UIColor *)color origin:(CGPoint)origin

{

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(origin.x, origin.y, 1000, 20)];

label.text = text;

label.font = font;

label.textColor = color;

[label sizeToFit];

return label;

}

//然后我们将第一页的元素加进来。

self.label_page1_1 = [UILabel labelWithText:@"我要买iPhone6!" font:[UIFont systemFontOfSize:18.0f] color:[UIColor redColor] origin:CGPointMake(140, 200)];

[self.scrollView addSubview:self.label_page1_1];

self.label_page1_2 = [UILabel labelWithText:@"我要看医生演唱会~~~~" font:[UIFont systemFontOfSize:18.0f] color:[UIColor blackColor] origin:CGPointMake(140, 240)];

[self.scrollView addSubview:self.label_page1_2];

self.label_page1_3 = [UILabel labelWithText:@"我要去大理!" font:[UIFont systemFontOfSize:18.0f] color:[UIColor orangeColor] origin:CGPointMake(140, 280)];

[self.scrollView addSubview:self.label_page1_3];

self.girlImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image_girl"]];

self.girlImageView.frame = CGRectMake(100, kScreenHeight – 200 – 50, 100, 200);

[self.scrollView addSubview:self.girlImageView];

3. 让第一页动起来~~

在第一页刚刚显示的时候,我们就希望第一页的元素能够有一个动起来的效果。那我们在上面刚刚加入第一页元素之后,可以紧接着做下面的事情:

self.girlImageView.transform = (-200, 0);

self.label_page1_1.transform = (- 100, 0);

self.label_page1_2.transform = (100, 0);

self.label_page1_3.transform = (- 120, 0);

[UIView animateWithDuration:0.7

animations:^{

self.girlImageView.transform = (0, 0);

self.label_page1_1.transform = (0, 0);

self.label_page1_2.transform = (0, 0);

self.label_page1_3.transform = (0, 0);

}];

可以看到,我们分别给第一页的四个元素不同的水平位移,然后希望它用0.7秒的时间,移动到之前init他们时候的位置。这样就完成了第一个4层的错位动画。

然后,我们希望在手指滑动scrollview 的时候,第一页的四个元素可以有相应的分层错位动画,那么我们第一需要拿到当前scrollView的位移量,也就是前面提到的很重要的contentOffset。这个值,在:

– (void)scrollViewDidScroll:(UIScrollView *)scrollView

中,可以实时的获取。

具体来看,怎么做。

– (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

CGFloat currentX = scrollView.contentOffset.x;

if (currentX <= kScreenWidth)

{

self.girlImageView.transform = ((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);

self.label_page1_2.transform = (- 200 * currentX / kScreenWidth, 0);

}

}

呵呵,是不是看不懂,那就对了。。。

下面解释下,首先抛出两个定理:

定理一:在scrollview的滑动过程中,视觉上看,scrollview上的元素的移动方向与手指滑动方向相反,并且移动的距离与手指滑动的距离相等。但所有元素在scrollview上的物理位置并未改变。

定理二:在scrollview的滑动过程中,当且仅当scrollview上的元素的物理移动距离与手指滑动距离相等并且移动方向相反时,scrollview的元素视觉位置保持不变。

然后我们有两个需求:

第一,希望那个小女孩跟随手指滑动的时候,视觉上不是向左移动一直到消失,而是向右移动,待滑动到第二页的时候,小女孩出现在屏幕右侧。

我们应该明确,小女孩的移动,只能是在scrollview上位置的移动。根据定理二,我们知道,如果保持视觉上小女孩位置不变,小女孩在scrollView上的实际物理位移应该是:

公式 4.3.1 baseDistance = kScreenWidth 屏幕宽度

那么如果我们希望在移动到第二页之后,小女孩的视觉位置右移了100像素,那么小女孩在scrollView上的实际物理位移应该是:

公式 4.3.2 distance = baseDistance + 100

第一页到第二页,scrollView一共位移是 kScreenWidth ,当前scrollView位移是 contentOffset.x ,可以得出,当前位移的比例:

公式 4.3.3 status = scrollView.contentOffest.x / distance

由 4.3.1 4.3.2 4.3.3可得,我们设置小女孩位移的方式:

self.girlImageView.transform = ((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);

第二个需求,希望第一页中,第二个label的向左移动速度快于其他两个label。

根据定理二,和类似于上面的推倒(推导)方式,也易得第二个label的位移方式:

self.label_page1_2.transform = (- 200 * currentX / kScreenWidth, 0);

五. 总结

综上所述,我们知道了分层动画的基本原理。如果使用更多的图层,更多的位移或者角度变化,就能组合出更加复杂的分层动画。

可以看到,分层动画的基本原理并不复杂,但是为什么那么多人倾向于借助3rd的library来实现呢?一个字,懒。

现如今移动开发领域对于美感和交互的要求越来越高,而开发出一款精美的app,设计师所需要付出的灵感和努力也越发显得重要。作为一个不怎么有美感的iOS工程师,想要在移动浪潮中立于不败之地,不断尝试更多新的可能远比实现更多的功能更加重要。

㈢ 求推荐AE制作app交互动画的书AE和flash做交互动画哪个好本人的目的就是想制作出GIF的交互动画求高人指点

首先GIF格式的动画是交互不了的。。。其次,做flash还是用flash软件好,ae做出来的尺寸太大!


深夜利|秘播视频
已添加在线视频资源,免费欣赏

赞 (0)