Unity图片浏览插件——Uniflow源码解析

    Unity图片浏览插件——Uniflow源码解析

                                                                                                                                                                                                                                                                                                 By D.S.Qiu

尊重他人的劳动，支持原创，转载请注明出处：http.dsqiu.iteye.com

       看网上看到Uniflow的工具，处于好奇就下载了个学习下，有了解的就知道其实是一个图片浏览工具。

        看到这个效果，起初就觉得很神奇（在2D camera的情况下实现）。一直都想知道在2D的情况下如何实现图片的变形，如上图的图片的透视效果——图片一头大，一头小。所以一开始看到这个效果非常兴奋，还以为让我找到了。看了下代码就非常失望，其实Uniflow实现的原理很简单：camera的 Projection 为 Perspetive 这样通过旋转图片的角度和位移就会呈现这个效果了。

        Uniflow主要是实现一套管理机制：实现图片左移，右移，居中，放大四种效果。

public enum EThumbnailFlippingAnimation
{
	Left,
	Centered,
	Right,
	Zoom
};

         本来就可以打住了，但为了使自己的学习发挥到最大作用，还是做下分享（很久没有写Blog了）。

        Uniflow的源码的目录结构很简单，下面分别介绍下每个类的作用：

             --ClickManager:鼠标事件管理器

                --ClickEventManager.cs:自定义事件的触发器，看过NGUI的UICamera就知道，这个脚本的就是这个功能——在Update中检测当前鼠标的状态，然后通过SendMessage触发事件：

if( m_rFirstPressedCollider != rCollidedElement )
{
	rCollidedElement.SendMessage( "OnHoverEvent", true, SendMessageOptions.DontRequireReceiver );
	m_rPreviousHoveredCollider = rCollidedElement;
}

                  --IClickEventListener:定义了两个事件监听器类型（函数）：

public interface IClickEventListener
{
	void OnClickEvent( );
	void OnHoverEvent( bool a_bIsHovered );
}

              --UIEffect:UI效果

                --gkInterpolate.cs:定义些缓动函数，对缓动感兴趣的可以猛击罗列更多缓动函数的实现。

                --UIEffectColor.cs:继承UIEffectTemplate，重现EffectUpdate函数，实现颜色的变化，更改Shader的color参数值。

                --UIEffectTemplate.cs:动画的实现类，类似NGUI的UITweener。

                --UIEffectTransformRelativeCoords.cs:Scale,Rotation,Position的动画实现

           --Uniflow:图片浏览器实现

                --UniflowGallery.cs:对UniflowThumbnail的管理类，定义图片之间的参数。

                --UniflowThumbnail.cs:对EThumbnailFlippingAnimation定义的四种效果的实现：

// Animates/flips the thumbnail.
// Animation can be skipped if a_bForceEndOfAnimation set to true
public void Flip( EThumbnailFlippingAnimation a_eFlippingAnimation, bool a_bForceEndOfAnimation )
{
	m_rUIEffectFlipping.Pause( );
	m_rUIEffectColorFade.Pause( );

	if( m_bIsZoomed == false )
	{
		switch( a_eFlippingAnimation )
		{
			case EThumbnailFlippingAnimation.Left:
			{
				m_rUIEffectFlipping.finalEulerAnglesOffset = m_rParentGallery.leftFlippingRotation;
				m_rUIEffectFlipping.finalScaleOffset       = m_rParentGallery.leftFlippingScale * Vector3.one;
				m_rUIEffectFlipping.finalPositionOffset    = m_rParentGallery.leftFlippingPosition;

				m_rUIEffectColorFade.colorIn = m_rUIEffectColorFade.currentColor;
				m_rUIEffectColorFade.colorOut = m_rParentGallery.ambientColor;
			}
			break;
                        //省略其他实现，具体可以查看代码
	        }
	}
}

 

                --UniflowUtils.cs:工具类

                --UniflowZoomBackground.cs:背景图片的效果的实现类。

           --Shaders:图片使用的shader，定义变量

                --shader_TransparentVertexLitOverlayP1.shader:

                --shader_TransparentVertexLitOverlayP2.shader:

     

 

小结：

       其实原理很简单，但是要想有一个好的管理还是需要额外做很多工作的。要不然也不会有Uniflow，虽然没有学到自己想要的，但是Uniflow的代码组织还是有很多借鉴的。

       

       因为之前一直有事，抽不开身，有很多要写的博客都落下了，希望以后可以给自己更多时间，更多的成长。

        如果您对D.S.Qiu有任何建议或意见可以在文章后面评论，或者发邮件（[e-mail])交流，您的鼓励和支持是我前进的动力，希望能有更多更好的分享。

        转载请在文首注明出处：http://dsqiu.iteye.com/blog/2017653

更多精彩请关注D.S.Qiu的博客和微博（ID：静水逐风）