| 导语 套路，在武术中是指一连串含有技击和攻防含义的动作组合，在本文中，指的就是一套实现特定功能的代码组合。
 
一、交互效果
 
如图所示，导航栏随列表滑动而动态改变背景色和标题显隐，这种交互设计比较常见，那该怎么去实现这样的交互效果呢？想必大体的思路大家都能想得到，首先是让VC的view的布局从屏幕上边缘开始，在UITableView滚动回调方法中根据偏移量改变导航栏的背景透明度。思路简单，但是具体到实现却是有不少技术细节要注意。下面我将分享我所在iOS项目实现导航栏动态变化交互效果的套路。
 
 
二、代码套路
 
第一步，如何让view的布局从屏幕顶部边缘开始，到TabBar的顶部截止？
 
iOS 7 之后，UINavigationBar和UITabBar默认都变成了半透明，系统也调整了view的布局，默认使用全屏布局(full-screen layout)，即铺满整个屏幕。为了让开发者可以自主控制view的布局，UIViewController新增了edgesForExtendedLayout属性，通过设置此属性，你可以指定view的边（上、下、左、右）延伸到整屏幕。
 
@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0);

typedef NS_OPTIONS(NSUInteger, UIRectEdge) {

UIRectEdgeNone = 0,

UIRectEdgeTop = 1 << 0,

UIRectEdgeLeft = 1 << 1,

UIRectEdgeBottom = 1 << 2,

UIRectEdgeRight = 1 << 3,

UIRectEdgeAll = UIRectEdgeTop | UIRectEdgeLeft | UIRectEdgeBottom | UIRectEdgeRight

} NS_ENUM_AVAILABLE_IOS(7_0);
 
刚刚说到UINavigationBar和UITabBar默认是半透明，但如果是不透明，你会发现设置edgesForExtendedLayout没有效果，如何在不透明的情况下也能延伸到整屏幕呢。UIViewController同时新增了一个extendedLayoutIncludesOpaqueBarssh属性，默认是NO，如果设置为YES，则在Bar不透明的情况下，edgesForExtendedLayout也能生效。所以套路的第一步是：
 
self.edgesForExtendedLayout = UIRectEdgeTop;
self.extendedLayoutIncludesOpaqueBars = YES;
 
第二步，如何动态改变导航栏的透明度和标题？
 
UINavigationBar的translucent、barTintColor、backgroundImage三者共同决定了UINavigationBar的背景效果，而translucent在中间起非常关键的作用，它决定了系统如何使用barTintColor和backgroundImage去设置UINavigationBar的背景效果。如果不了解其中细节的，强烈推荐我的另一篇文章《UINavigationBar的translucent、barTintColor、backgroundImage》下面直接分享动态改变导航栏的透明度和标题的最佳实践写法：
 
1. 不主动去设置UINavigationBar的translucent为YES，因为如果主动设置为YES，则导航栏无法做到完全不透明；
 
2. 通过setBackgroundImage:forBarMetrics: 的方式来设置导航栏背景，以达到控制背景效果的目的，为什么要怎样操作，在我刚刚推荐的文章里有详细的分析；
 
3. backgroundImage通过颜色生成，通过改变颜色alpha值，来动态控制图片的透明度，最终控制导航栏透明度；
 
4. 如果导航栏已经是不透明的背景了，就不需要再重复设置，减少颜色转图片的资源消耗，可以通过translucent的值是否为NO来判断是否已经设为不透明背景；
 
5. 通过设置self.navigationItem.titlel来控制标题的变化，而不是self.title, 因为self.title会同时改变tabBar是的title；
 
所以套路的第二步是：
 
// 根据scrollView的偏移量来动态计算alpha值
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint offset = scrollView.contentOffset;
    CGFloat alpha = 1.0;
    if (offset.y <= 0) {
        alpha = 0;
    } else if (offset.y < TOP_SAFE_OFFSET) {
        alpha = 1.0 - (TOP_SAFE_OFFSET - offset.y)/TOP_SAFE_OFFSET;
    } else {
        alpha = 1.0;
    }
    if (!(alpha == 1 && !self.navigationController.navigationBar.translucent)) {
        //如果导航栏背景已经是不透明，那就不再需要重复设置了，减少颜色转图片的开销
        [self.navigationController.navigationBar ig_setBackgroundImageByColor:HEXACOLOR(IGAME_NAVIBAR_COLOUR_VALUE, alpha) forBarMetrics:UIBarMetricsDefault];
    }
    self.navigationItem.title = alpha > 0.2 ? @"赛事":@"";
}
 
项目中导航栏一般是纯色背景，所以提供一个分类方法，快速通过颜色来设置背景图
 
@interface UINavigationBar (IGAppearance)

- (void)ig_setBackgroundImageByColor:(UIColor *)imageColor forBarMetrics:(UIBarMetrics)barMetrics;

@end
 
通过颜色来创建图片的方法
 
@interface UIImage (IGUIKit)

+ (nullable UIImage *)imageWithColor:(UIColor *)color;

@end
 
第三步，如何让tableView不自动偏移？
 
如图，当我们设置了view从顶部边缘开始布局之后，发现tableView会自动偏移，使内容从导航栏底部开始，为什么会发生偏移呢? 因为tableview从屏幕顶部开始布局，为了不让导航栏遮住tableView的内容，系统默认会自动调整tableview的contentInset，我们可以打印一下tableView，可以看到一个adjustedContentInset: {64, 0, 0, 0}。adjustedContentInset是iOS 11之后新增的属性。如果是iOS 11之前，那就是调整contentInset。
 
<UITableView: 0x1049d2200; frame = (0 0; 375 618); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x2836147b0>; layer = <CALayer: 0x283805f20>;

contentOffset: {0, -62}; contentSize: {375, 2068}; adjustedContentInset: {64, 0, 0, 0}>

(lldb) po NSStringFromUIEdgeInsets(self.tableView.contentInset)

{64, 0, 0, 0}
 
那如何禁止系统自动调整tableView的contentInset呢？下面就是我们套路的最后一步：
 
if (@available(iOS 11.0, *)) {
    self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {
    self.automaticallyAdjustsScrollViewInsets = NO;
}
 
 
 
通过以上三个步骤，我们便能轻轻松松实现导航栏动态变化交互效果。感谢大家的阅读，欢迎大家提出问题和建议！

用SVG实现动态交互式地图
 
SVG是目前最火热的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形，它是基于XML，由W3C联盟进行开发。SVG可以实现无损缩放，在性能上要比其它格式的图片更好，今天教大家用SVG实现一个动态交互式地图，先上效果图： 
  
 一、 实现思路 
 下载含有台湾地图的SVG，地图资源可以在这个网站上https://www.amcharts.com/dl/javascript-maps/ 下载， 
 用http://inloop.github.io/svg2android/ 网站将SVG资源转换成相应的Android代码，利用DOM解析SVG的代码，将属性pathData数据封装成JavaBean，最重要的是得到点击的Path。Path指令解析如下所示：
 
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 同样二次贝塞尔曲线，更平滑
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 ，相当于arcTo()
Z = closepath()：关闭路径（会自动绘制链接起点和终点）
 
重写onDraw方法，利用path绘制台湾地图，重写onTouchEvent方法，记录手指触摸位置，判断坐标是否在某一个市的范围内。 
 二、 代码实例 
 自定义TaiWanMapView
 
public class TaiWanMapView extends View {
    private static final String TAG = TaiWanMapView.class.getName();
    private List<TaiWanItem> taiwanItems = new ArrayList<TaiWanItem>();
    //被点击的区域
    private TaiWanItem selectItem;
    //缩放1.3倍
    private float scale = 1.3f;
    private Context mContext;
    private Paint mPaint;
    private int[] colors = new int[]{0xFF239BD7,0xFF30A9E5,0xFF80CBF1,0xFFF0E68C};
    GestureDetectorCompat gestureDetectorCompat;

    public TaiWanMapView(Context context) {
        super(context);
    }

    public TaiWanMapView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        mContext = context;
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        gestureDetectorCompat = new GestureDetectorCompat(context,new GestureDetector.SimpleOnGestureListener(){
            @Override
            public boolean onDown(MotionEvent e) {
                Log.d(TAG,"onDown x:"+e.getX()+";y:"+e.getY());
                handleTouch(e.getX(),e.getY());
                return true;
            }
        });
        thread.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        //将画布缩放1.3倍
        canvas.scale(scale,scale);
        if(taiwanItems != null){
            for(TaiWanItem item:taiwanItems){
                if(item != selectItem){
                    item.draw(canvas,mPaint,false);
                }
            }
            if(selectItem != null){
                selectItem.draw(canvas,mPaint,true);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return gestureDetectorCompat.onTouchEvent(event);
    }

    private void handleTouch(float x,float y){
        TaiWanItem taiWanItem = null;
        if(taiwanItems != null){
            for(TaiWanItem item : taiwanItems){
                if(item.isTouch((int)(x/scale),(int)(y/scale))){
                    taiWanItem = item;
                    break;
                }
            }
            if(taiWanItem != null) {
                selectItem = taiWanItem;
                postInvalidate();
            }
        }
    }

    Thread thread = new Thread(){
        @Override
        public void run() {
            InputStream inputStream = mContext.getResources().openRawResource(R.raw.taiwan);
            //采用Dom解析器解析xml
            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
            DocumentBuilder builder = null;
            try {
                builder = factory.newDocumentBuilder();
                Document doc = builder.parse(inputStream);
                Element rootelement = doc.getDocumentElement();
                NodeList items = rootelement.getElementsByTagName("path");
                for(int i=0;i<items.getLength();i++){
                    Element element = (Element) items.item(i);
                    String pathData = element.getAttribute("android:pathData");
                    Path path = PathParser.createPathFromPathData(pathData);
                    TaiWanItem item = new TaiWanItem(path);
                    taiwanItems.add(item);
                }
                handler.sendEmptyMessage(1);
            } catch (ParserConfigurationException e) {
                e.printStackTrace();
            } catch (SAXException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    };

    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if(taiwanItems == null || taiwanItems.size()==0)
                return;

            int colorNum = taiwanItems.size();
            int color = Color.WHITE;
            //赋予颜色
            for(int i=0;i<colorNum;i++){
                int flag = i % 4;
                switch(flag){
                    case 1:
                        color = colors[0];
                        break;
                    case 2:
                        color = colors[1];
                        break;
                    case 3:
                        color = colors[2];
                        break;
                    default:
                        color = colors[3];
                }
                taiwanItems.get(i).setDrawColor(color);
            }
            postInvalidate();
        }
    };
}
 
将地图path封装成TaiWanItem
 
public class TaiWanItem {

    private Path path;
    private int drawColor;

    public TaiWanItem(Path path) {
        this.path = path;
    }

    /**
     * 绘制地图path
     * @param canvas
     * @param paint
     * @param isSelect
     */
    public void draw(Canvas canvas, Paint paint,boolean isSelect){
        if(isSelect){
            //画阴影图层
            paint.setStrokeWidth(2);
            paint.setShadowLayer(8,0,0,0xffffff);
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(Color.BLACK);
            canvas.drawPath(path,paint);
            //画区域path
            paint.clearShadowLayer();
            paint.setStrokeWidth(2);
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(drawColor);
            canvas.drawPath(path,paint);
        }else{
            //画线条
            paint.clearShadowLayer();
            paint.setStrokeWidth(1);
            paint.setStyle(Paint.Style.STROKE);
            paint.setColor(0xFFD0E8F4);
            canvas.drawPath(path,paint);
            //画区域
            paint.setStrokeWidth(2);
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(drawColor);
            canvas.drawPath(path,paint);
        }
    }

    /**
     * 判断当前点击坐标是否在path范围内
     * @param x
     * @param y
     * @return
     */
    public boolean isTouch(int x,int y){
        RectF rectF = new RectF();
        path.computeBounds(rectF,true);
        Region region = new Region();
        region.setPath(path,new Region((int)rectF.left,(int)rectF.top,(int)rectF.right,(int)rectF.bottom));
//判断X,Y是否在region区域范围内
        if(region.contains(x,y)) return true;
        return false;
    }

    public void setDrawColor(int drawColor) {
        this.drawColor = drawColor;
    }
}
 
整个代码不算很复杂，关键就是在onDraw方法里面，利用系统提供的方法canvas.drawPath(Path,Paint )将path区域绘制在画布上。

首当其冲的当然使我们的leaflejs官网文档啦，任何一个插件的使用自然离不开官网文档
 https://leafletjs.com/
 
然后我们想要实现的各种效果在如下网址
 http://develop.smaryun.com:81/API/JS/IGSInterfaceDemoForLeaflet/
 
这个网站包含了几乎所有leaflet地图效果
 

现在前端页面能够实现的交互效果越来越酷炫，也越来越复杂。但是这些特效背后的形成机制，却始终简洁优雅。
 
简单说来，一个交互效果的实现，是由HTML提供页面骨架，JavaScript负责行为事件，而页面中呈现出的各种各样的效果，是由CSS完成的。当然，每一个特效形成的具体原理各有不同，不过也是有规律可寻。
 
显示与隐藏
 
典型代表： 下拉菜单 提示框
 
利用CSS的display属性，在事件发生后实现相应区块内容的显示和隐藏显示和隐藏。 需要注意的是，在具体实现中，最好不要在JS代码直接写style.display,而是通过改变相应内容的className去实现，这样就把JS与CSS很好的进行了分离。这种显示和隐藏，根据不同的情况还存在很多的变体，opactiy（蒙版） 、overflow（图片轮播）。
 
数值改变
 
典型代表： 顶部广告 图片轮播
 
页面中很多元素的CSS属性都是数值型的，结合setInterval() setTimeout()等方法，可以让CSS属性值动态的改变，从而实现一些简单的动画效果。不过对于一些复杂的动画效果，最好是用CSS3去实现，呈现出来会更细腻流畅。
 
　 
 相互关联
 
典型代表： 网页定位导航 放大镜
 
页面中各元素不是孤立存在的，它们之间也是有许多的联系。，网页定位导航的实现，就是利用了页面内容与导航条间的联系， 放大镜效果，是通过建立鼠标位置的移动与放大展示图片的联系。
 
当然这里效果总结只是总体的很小一部分，而且随着CSS3、HTML5等新特性被浏览器的逐渐支持，会有更多新奇好玩的效果出现。等有机会了，再进行总结。