iOSは2つの色の中間の過剰な色を取ります

[toc]
物語の背景

プロダクトマネージャ:バラバラ、バラバラ、バラバラ..

私:あなたは何を言っていますか.私は一言も聞き取れませんでした.

をはっきり表現できますか.

製品マネージャー:あなたの携帯には天猫が入っていますか.

私:ない???

製品マネージャー:ちょっと見せてあげましょう.このような効果をするのですが、できますか.

天猫の実例gif

私:できる(このような自信)、私はまずAndroidとH 5開発とコミュニケーションします!!!

需要分析

banner切替の際、banner背景領域の色を

に変更する

bannerページ別スクロール

ジェスチャーなしで2秒banner自動切替

手動スライド切替

をサポートする.

ジェスチャーbannerタッチを開始し、自動切替

を停止する

ジェスチャータッチを停止し、自動切替

を開始する.

現在の背景色=現在のページbannerに対応する背景色+(次のページbannerに対応する背景色-現在のページbannerに対応する背景色)*親ビューの表示領域に対する次のページbannerの割合

bannerとbannerの背景色は、いずれも運用構成で配布されたクライアントの

である.
実現構想.
bannerListとbannerBackgroundColorListの2つのリストがあると仮定すると、bannerListにはbannerデータが入っており、bannerBackgroundColorListには各bannerに対応する背景色データが入っており、各bannerには1つのcolorが対応している

NSArray *bannerList = @[banner1, banner2, banner3, banner4];
NSArray *bannerBackgroundColorList = @[color1, color2, color3, color4];

ScrollViewのエージェントを実装し、スライドプロセスをリスニングし、次の方法を実装します.

- (void)scrollDidScroll:(UIScrollView *)scrollView {
    //...
}

開始ページと終了ページの背景色を取得
現在のページを取得

NSInteger startPage = scrollView.contentOffset.x / scrollView.width;
UIColor *startColor = bannerBackgroundColorList[startPage];

表示する次のページを取得

NSInteger nextPage = startPage + 1;
if (nextPage >= bannerBackgroundColorList.count){
    nextPage = 0;
}
UIColor *endColor = bannerBackgroundColorList[nextPage];

終了ページに表示される割合を取得し、計算式は次のようになります.

p = (scrollView.offset.x%scrollView.width)/scrollView.width

scrollView.offset.xは、スクロールビューのx方向のオフセット量である、scrollView.widthはスクロールビューの幅です
取得色をRGBA色値に変換
色自体がバックエンドから渡される16進数の色値である場合、次のようになります.

/**               */
BOOL YSYHexStrToRGBA(NSString *str,
                     NSInteger *r, NSInteger *g, NSInteger *b, NSInteger *a) {
    str = [str uppercaseString];
    if ([str hasPrefix:@"#"]) {
        str = [str substringFromIndex:1];
    } else if ([str hasPrefix:@"0X"]) {
        str = [str substringFromIndex:2];
    }
    NSUInteger length = [str length];
    //         RGB            RGBA          RRGGBB        RRGGBBAA
    if (length != 3 && length != 4 && length != 6 && length != 8) {
        return NO;
    }
    //RGB,RGBA,RRGGBB,RRGGBBAA
    if (length < 5) {
        *r = YSYHexStrToInt([str substringWithRange:NSMakeRange(0, 1)]);
        *g = YSYHexStrToInt([str substringWithRange:NSMakeRange(1, 1)]);
        *b = YSYHexStrToInt([str substringWithRange:NSMakeRange(2, 1)]);
        if (length == 4){
            *a = YSYHexStrToInt([str substringWithRange:NSMakeRange(3, 1)]);
        } else {
            *a = 255;
        }
    } else {
        *r = YSYHexStrToInt([str substringWithRange:NSMakeRange(0, 2)]);
        *g = YSYHexStrToInt([str substringWithRange:NSMakeRange(2, 2)]);
        *b = YSYHexStrToInt([str substringWithRange:NSMakeRange(4, 2)]);
        if (length == 8) {
            *a = YSYHexStrToInt([str substringWithRange:NSMakeRange(6, 2)]);
        } else {
            *a = 255;
        }
    }
    return YES;
}

色がUICOLORタイプのオブジェクトである場合は、UICOLORクラスが提供する方法を使用します.

- (BOOL)getRed:(CGFloat *)R green: (CGFloat *)G blue:(CGFloat *)B alpha:(CGFloat *)A

ここではbannerBackgroundColorListの要素UIcolorタイプの

CGFloat startR,startG,startB,startA,endR,endG,endB,endA;

[startColor getRed:&startR green:&startG blue:&startB alpha:&startA];
[endColor getRed:&endR green:&endG blue:&endB alpha:&endA];

最終色値の計算

R = startR + (endR - starR) * p;
G = startG + (endG - starG) * p;
B = startB + (endB - starB) * p;
A = startA + (endA - starA) * p;

計算した色値を色に変換し、bannerバックグラウンドに現在表示する色を取得します.

UIColor *currentColor = [UIColor colorWithRed:R green:G blue:B alpha:A];

まとめ

banner切り替えを容易にするためにGitHubオープンソースライブラリSDCycleScrollViewを使用しています.使いやすい

です.

技術の要点は、2色の中間色を取ることであり、色はR、G、B、Aからなり(正確にはR、G、Bの3色の値からなる)、中間色、すなわち開始色のRGBA値と終了色のRGBA値とを演算して最終的なRGBA色の値を得、色値を色

に再変換することである.
ファイナルエフェクト
最終効果gif