如何做出比较炫的 UI？

exceed_me 2011-10-11 05:07:23
加精
Apple 一直是被模仿的对象，现在手机上的 UI 明显的比起 Windows Native 的 UI 要炫的多，旋转，3D UI，动画 效果等。

无意间查找到经典的 Apple CoverFlow 效果，一查原来连维基百科里都有记录，

http://psp-download-center.com/members/advanced/img/17483_truflow-screenshot-01.png

也发现也有人使用 OpenGL 在 Windows 上实现了：

如下：
国内的：http://blog.csdn.net/beidoustudio/article/details/4090806
国外的：http://sourceitsoftware.blogspot.com/2008/06/coverflow-update.html

还有 Android 上的 Wave Launcher 程序的效果：
http://ultimatefaves.com/




意识到，现在软件的 UI 和用户体验也越来越重要了，手机上的 UI 实现明显比 Native 的方法简单很多，而传统的 MFC 又显得太过于臃肿，手机平台 Android/iPhone 底层应该是封装了不少，自己写上层代码简单很多，但自己在 Windows 上用 Native 方法实现底层，除了 3D 库如 D3D/OpenGL 之外，还需要考虑和思考很多

问题1：如何做出比较炫的动画，实现更好的人机交互，最简单的，如 360 桌面（虽然我觉得是很傻的软件），把手机上的桌面弄到 Windows 上，最直观的例子，当用户点击翻页，1，2，3 时，如何使翻页的效果更加平滑？更加舒服？我想直接用 MoveWindow 肯定不行。

问题2：有哪些比较经典特效实现，Apple 也好，Android 也好，游戏中的特效也好，我主要指 UI 这块的，比如 Apple 经典的 CoverFlow（惭愧直到今天才知道有这个名词），还有哪些更多的名词，有相应平台上的实现代码就好，最好有人在 Windows 上做过移植。

问题3：需要使用 Native C/C++ 实现，而不是 WPF（据说 Windows 8 要抛弃 WPF 了），底层的渲染库不重要 DirectX/OpenGL 这个不是很重要，重要的是思路。

现在 UI 要新的变革了我想，至少要实现移动设备上的 UI 效果的话，传统窗口方式肯定不行，这么多窗口，别的不说刷新就弄死你，Windows 8 还没出来，Windows 8 的 Jupiter。

大家能否一起讨论下？
...全文
6560 181 打赏 收藏 转发到动态 举报
写回复
用AI写文章
181 条回复
切换为时间正序
请发表友善的回复…
发表回复
Ians_Huyu 2012-07-05
  • 打赏
  • 举报
 回复
你不诋毁我来诋毁，妈的，累死我了[Quote=引用 94 楼 的回复:]

引用 30 楼 psbeond 的回复:

引用 22 楼 tomsoft 的回复:

再多说几句，基于贴图并不是简单的设计。现在国内市场上，几个商业的界面库，基本都是你说的这种基于贴图的库。界面和功能分开，和使用mfc还是脚本没有任何关系。那种复杂的界面技术，一定要由国际上比较牛的几家公司开发（像微软、google这种），才能引领程序员去使用。个人即使开发出来，也没有任何用处。像wpf……
[/Quote]
ThunderFAE 2012-06-02
  • 打赏
  • 举报
 回复
各种学习啊。。
csfinal9 2012-05-07
  • 打赏
  • 举报
 回复
现在可以实现如何个性化的界面，可是总是不如别人的切屏快！
liuwenbin12345 2011-11-26
  • 打赏
  • 举报
 回复
很好，lz辛苦了
exceed_me 2011-11-02
  • 打赏
  • 举报
 回复
[Quote=引用 190 楼 exceed_me 的回复:]

感谢 clayui 在他的博客中对我的回复，让我知道了 缓动动画 的概念

给大家极力推荐一个博文，就是我要的效果，而且还提供了这么多的方法可选择，代码非常简单，虽然是 AS/JS 的

http://www.11gz.com/blog/2011/03/05/j……
[/Quote]

我把改好的代码发一下，省得自己再改也麻烦：

Tween.h


#pragma once



#include <math.h>



// Algorithm Reference:

//http://www.robertpenner.com/easing/

//http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html



#ifndef PI

#define PI	3.1415926f

#endif



const float EPSINON = 0.000001f;

#define EQUAL_ZERO(x) ((x >= - EPSINON) && (x <= EPSINON)) ? TRUE : FALSE



class CTween

{

public:

	CTween(void);

	~CTween(void);



	// Linear

	float Linear_easeIn(float t, float b, float c, float d);

	float Linear_easeOut(float t, float b, float c, float d);

	float Linear_easeInOut(float t, float b, float c, float d);



	// Quadratic

	float Quad_easeIn(float t, float b, float c, float d);

	float Quad_easeOut(float t, float b, float c, float d);

	float Quad_easeInOut(float t, float b, float c, float d);



	// Cubic

	float Cubic_easeIn(float t, float b, float c, float d);

	float Cubic_easeOut(float t, float b, float c, float d);

	float Cubic_easeInOut(float t, float b, float c, float d);



	// Quartic

	float Quart_easeIn(float t, float b, float c, float d);

	float Quart_easeOut(float t, float b, float c, float d);

	float Quart_easeInOut(float t, float b, float c, float d);



	// Quintic

	float Quint_easeIn(float t, float b, float c, float d);

	float Quint_easeOut(float t, float b, float c, float d);

	float Quint_easeInOut(float t, float b, float c, float d);



	// Sinusoidal

	float Sine_easeIn(float t, float b, float c, float d);

	float Sine_easeOut(float t, float b, float c, float d);

	float Sine_easeInOut(float t, float b, float c, float d);



	// Exponential

	float Expo_easeIn(float t, float b, float c, float d);

	float Expo_easeOut(float t, float b, float c, float d);

	float Expo_easeInOut(float t, float b, float c, float d);



	// Circular

	float Circ_easeIn(float t, float b, float c, float d);

	float Circ_easeOut(float t, float b, float c, float d);

	float Circ_easeInOut(float t, float b, float c, float d);



	// Elastic

	float Elastic_easeIn(float t, float b, float c, float d, float a = 0.0f, float p = 0.0f);

	float Elastic_easeOut(float t, float b, float c, float d, float a = 0.0f, float p = 0.0f);

	float Elastic_easeInOut(float t, float b, float c, float d, float a = 0.0f, float p = 0.0f);



	// Back

	float Back_easeIn(float t, float b, float c, float d, float s = 0.0f);

	float Back_easeOut(float t, float b, float c, float d, float s = 0.0f);

	float Back_easeInOut(float t, float b, float c, float d, float s = 0.0f);



	// Bounce

	float Bounce_easeOut(float t, float b, float c, float d);

	float Bounce_easeIn(float t, float b, float c, float d);

	float Bounce_easeInOut(float t, float b, float c, float d);



public:

	float t, b, c, d, a, p;

};


Tween.cpp


#include "StdAfx.h"

#include "Tween.h"



CTween::CTween(void)

{

}



CTween::~CTween(void)

{

}



// Linear

float CTween::Linear_easeIn(float t, float b, float c, float d)

{

	return c * t / d + b;

}



float CTween::Linear_easeOut(float t, float b, float c, float d)

{

	return c * t / d + b;

}



float CTween::Linear_easeInOut(float t, float b, float c, float d)

{

	return c * t / d + b;

}



// Quadratic

float CTween::Quad_easeIn(float t, float b, float c, float d)

{

	return c * (t /= d) * t + b;

}



float CTween::Quad_easeOut(float t, float b, float c, float d)

{

	return -c * (t /= d) * (t - 2) + b;

}



float CTween::Quad_easeInOut(float t, float b, float c, float d)

{

	if ((t /= d / 2) < 1)

		return c / 2 * t * t + b;

	return -c / 2 * ((--t) * (t - 2) - 1) + b;

}



// Cubic

float CTween::Cubic_easeIn(float t, float b, float c, float d)

{

	return c * (t /= d) * t * t + b;

}



float CTween::Cubic_easeOut(float t, float b, float c, float d)

{

	return c * ((t = t / d - 1) * t * t + 1) + b;

}



float CTween::Cubic_easeInOut(float t, float b, float c, float d)

{

	if ((t /= d / 2) < 1)

		return c / 2 * t * t * t + b;

	return c / 2 * ((t -= 2) * t * t + 2) + b;

}



// Quartic

float CTween::Quart_easeIn(float t, float b, float c, float d)

{

	return c * (t /= d) * t * t * t + b;

}



float CTween::Quart_easeOut(float t, float b, float c, float d)

{

	return -c * ((t = t / d - 1) * t * t * t - 1) + b;

}



float CTween::Quart_easeInOut(float t, float b, float c, float d)

{

	if ((t /= d / 2) < 1)

		return c / 2 * t * t * t * t + b;

	return -c / 2 * ((t -= 2) * t * t * t - 2) + b;

}



// Quintic

float CTween::Quint_easeIn(float t, float b, float c, float d)

{

	return c * (t /= d) * t * t * t * t + b;

}



float CTween::Quint_easeOut(float t, float b, float c, float d)

{

	return c * ((t = t / d - 1)* t * t * t * t + 1) + b;

}



float CTween::Quint_easeInOut(float t, float b, float c, float d)

{

	if ((t /= d / 2) < 1)

		return c / 2 * t * t * t * t * t + b;

	return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;

}



// Sinusoidal

float CTween::Sine_easeIn(float t, float b, float c, float d)

{

	return -c * cos(t / d * (PI / 2)) + c + b;

}



float CTween::Sine_easeOut(float t, float b, float c, float d)

{

	return c * sin(t / d * (PI / 2)) + b;

}



float CTween::Sine_easeInOut(float t, float b, float c, float d)

{

	return -c / 2 * (cos(PI * t/ d) - 1) + b;

}



// Exponential

float CTween::Expo_easeIn(float t, float b, float c, float d)

{

	return (t == 0) ? b : c * pow(2, 10 * (t / d - 1)) + b;

}



float CTween::Expo_easeOut(float t, float b, float c, float d)

{

	return (t == d) ? b + c : c * (-pow(2, -10 * t / d) + 1) + b;

}



float CTween::Expo_easeInOut(float t, float b, float c, float d)

{

	if (t == 0)

		return b;

	if (t == d)

		return b+c;

	if ((t /= d / 2) < 1)

		return c / 2 * pow(2, 10 * (t - 1)) + b;

	return c / 2 * (-pow(2, -10 * --t) + 2) + b;

}



// Circular

float CTween::Circ_easeIn(float t, float b, float c, float d)

{

	return -c * (sqrt(1 - (t /= d) * t) - 1) + b;

}



float CTween::Circ_easeOut(float t, float b, float c, float d)

{

	return c * sqrt(1 - (t = t / d - 1) * t) + b;

}



float CTween::Circ_easeInOut(float t, float b, float c, float d)

{

	if ((t /= d / 2) < 1)

		return -c / 2 * (sqrt(1 - t * t) - 1) + b;

	return c / 2 * (sqrt(1 - (t -= 2) * t) + 1) + b;

}



// Elastic

float CTween::Elastic_easeIn(float t, float b, float c, float d, float a/* = 0.0f*/, float p/* = 0.0f*/)

{

	float s = 0;

	if (t == 0)

		return b;

	if ((t /= d) == 1)

		return b + c;

	if (!p)

		p = d * .3f;

	if (!a || a < abs(c))

	{

		a = c;

		s = p/4;

	}

	else

		s = p / (2 * PI) * asin (c / a);

	return -(a * pow(2, 10 * (t -= 1)) * sin((t * d - s) * (2 * PI) / p)) + b;

}



float CTween::Elastic_easeOut(float t, float b, float c, float d, float a/* = 0.0f*/, float p/* = 0.0f*/)

{

	float s = 0;

	if (t == 0)

		return b;

	if ((t /= d) == 1)

		return (b + c);

	if (!p)

		p = d *.3f;

	if (!a || a < abs(c))

	{

		a = c;

		s = p / 4;

	}

	else

		s = p / (2 * PI) * sin((float)c / a);



	return (a * pow(2.0f, (int) - 10 * t) * sin((t * d - s) * (2 * PI) / p) + c + b);

}



float CTween::Elastic_easeInOut(float t, float b, float c, float d, float a/* = 0.0f*/, float p/* = 0.0f*/)

{

	float s = 0;

	if (t == 0)

		return b;

	if ((t /= d / 2) == 2)

		return b + c;

	if (!p)

		p = d * (.3f * 1.5f);

	if (!a || a < abs(c))

	{

		a = c;

		s = p/4;

	}

	else

		s = p / (2 * PI) * asin (c / a);

	if (t < 1)

		return -.5f * (a * pow(2, 10 * (t -= 1)) * sin( (t * d - s) * (2 * PI) / p )) + b;

	return a * pow(2, -10 * (t -= 1)) * sin((t * d - s) * (2 * PI) / p ) * .5f + c + b;

}



// Back

float CTween::Back_easeIn(float t, float b, float c, float d, float s/* = 0.0f*/)

{

	if (EQUAL_ZERO(s))

		s = 1.70158f;

	return c * (t /= d) * t * ((s + 1) * t - s) + b;

}



float CTween::Back_easeOut(float t, float b, float c, float d, float s/* = 0.0f*/)

{

	if (EQUAL_ZERO(s))

		s = 1.70158f;

	return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;

}



float CTween::Back_easeInOut(float t, float b, float c, float d, float s/* = 0.0f*/)

{

	if (EQUAL_ZERO(s))

		s = 1.70158f;

	if ((t /= d / 2) < 1)

		return c / 2 * (t * t * (((s *= (1.525f)) + 1) * t - s)) + b;

	return c / 2 * ((t -= 2) * t * (((s *= (1.525f)) + 1) * t + s) + 2) + b;

}



// Bounce

float CTween::Bounce_easeOut(float t, float b, float c, float d)

{

	if ((t /= d) < (1 / 2.75))

	{

		return c * (7.5625f * t * t) + b;

	}

	else if (t < (2 / 2.75))

	{

		return c * (7.5625f * (t -= (1.5f / 2.75f)) * t + .75f) + b;

	}

	else if (t < (2.5 / 2.75))

	{

		return c * (7.5625f * (t -= (2.25f / 2.75f)) * t + .9375f) + b;

	}

	else

	{

		return c * (7.5625f * (t -= (2.625f / 2.75f)) * t + .984375f) + b;

	}

}



float CTween::Bounce_easeIn(float t, float b, float c, float d)

{

	return c - Bounce_easeOut(d - t, 0, c, d) + b;

}



float CTween::Bounce_easeInOut(float t, float b, float c, float d)

{

	if (t < d / 2)

		return Bounce_easeIn(t * 2, 0, c, d) * .5f + b;

	else return Bounce_easeOut(t * 2 - d, 0, c, d) * .5f + c * .5f + b;

}
exceed_me 2011-11-01
  • 打赏
  • 举报
 回复
感谢 clayui 在他的博客中对我的回复，让我知道了 缓动动画 的概念

给大家极力推荐一个博文，就是我要的效果，而且还提供了这么多的方法可选择，代码非常简单，虽然是 AS/JS 的

http://www.11gz.com/blog/2011/03/05/jquery-easing-animation/
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html

翻译成 C++ 的就可以了，极力推荐，效果不错！
exceed_me 2011-11-01
  • 打赏
  • 举报
 回复
感谢 clayui 在他的博客中对我的回复，让我知道了 缓动动画 的概念

给大家极力推荐一个博文，就是我要的效果，而且还提供了这么多的方法可选择，代码非常简单，虽然是 AS/JS 的

http://www.11gz.com/blog/2011/03/05/jquery-easing-animation/
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html

翻译成 C++ 的就可以了，极力推荐，效果不错！
melos 2011-11-01
  • 打赏
  • 举报
 回复
这贴必须要马克一下了！！
dd911501406 2011-10-22
  • 打赏
  • 举报
 回复
好帖子,mark
dic_008 2011-10-22
  • 打赏
  • 举报
 回复
skin++ 这个能做UI，貌似不是免费的工具。
Krisshang 2011-10-21
  • 打赏
  • 举报
 回复
思想决定一切。
serven_zhang 2011-10-21
  • 打赏
  • 举报
 回复
挺好玩的……
ljcao69 2011-10-21
  • 打赏
  • 举报
 回复
最近一直对坐软件的UI很头疼，看了以后获益良多，谢谢
九月 2011-10-21
  • 打赏
  • 举报
 回复
比较看好html5 移动端和pc端都有不错的支持
HHL5566 2011-10-21
  • 打赏
  • 举报
 回复
来学习
aa964584826 2011-10-21
  • 打赏
  • 举报
 回复
看似很强 学习了
zhuolovejuan 2011-10-21
  • 打赏
  • 举报
 回复
就这么回事吧
liveths 2011-10-20
  • 打赏
  • 举报
 回复
我有来骗分了
xiaolaoshu1119 2011-10-20
  • 打赏
  • 举报
 回复
代码好学好写，对美的敏感度可不是每个人都有幺
xiaolaoshu1119 2011-10-20
  • 打赏
  • 举报
 回复
只有代码功底恐怕不够奥，还要靠各人对美的敏感度。
加载更多回复（161）
C#winform制作绚丽的Ui界面
C# 包括C#的界面换皮肤和dll的引用，制作绚丽的界面效果
QUI试用版V3.0 quickui
V2系列的框架由于开发时间比较早，在浏览器兼容性方面差了不少。新版本V3系列框架，在兼容性方面有了非常大的改进，可以完美兼容ie6-ie9，firefox，chrome等主流浏览器。 2、性能的提升和bug的修正 通过对原有...
SwiftUI入门到实战课程 [2023版]
【课程特点】 1、231节大容量课程：包含了SwiftUI的大部分知识点，详细讲解SwiftUI的方方面面； 2、15个超级精彩的实例：包含美食、理财、健身、教育、电子商务等各行业的App实例； 3、创新的教学模式：手把手教您...
JQuery ui 插件帮助文档,chm格式
目前最新的jquery ui插件的chm格式的帮助文档,保证能够在vista系统下打开,jquery的ui插件让你可以做出炫丽的效果,而且最为重要的是它是一个非常轻量的框架,易于扩展,节省带宽,执行速度快
Windows也可与Mac一样酷、一样炫-WPF基本介绍
要赢得世界，必须在恰当的时间做出恰当的事。这一点，微软做到了。历经微软DOS，Win 31, Windows 95, Windows 98, Windows 2000, Windows XP, 一路走来，一次比一次热闹，一个比一个精彩、炫丽。Windows Vista的宣传...
界面

15,979

社区成员

115,896

社区内容

发帖
与我相关
我的任务
社区描述
VC/MFC 界面
社区管理员
  • 界面
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章