ios-Chinese character sequence display

Objective:

Mainly used the following content: 
1.CABasicAnimation--animationwithkeypath:@ "strokeend"//start to draw
2.CAKeyframeAnimation- animationwithkeypath:@ "position"//position as key frame animation
3.cashapelayer//cashapelayer need to be used in conjunction with Bezier curves to make sense, as a progress bar
4.calayer//shows the layer of view

Demo Address

Effect Display:

Get the font path:

    Uibezierpath *path = [self getstringlayer:@ "I ' m quinn--Kui"];

1 2

To create a cashapelayer from a font path:

    [Path Addlinetopoint:cgpointmake (0)];


    Cashapelayer *pathlayer = [Cashapelayer layer];
    Pathlayer.frame = self.view.layer.bounds;
    Pathlayer.bounds = Cgpathgetboundingbox (path. Cgpath);
    Pathlayer.backgroundcolor = [[Uicolor yellowcolor] cgcolor];
    pathlayer.geometryflipped = YES;
    Pathlayer.path = path. Cgpath;
    Pathlayer.strokecolor = [Uicolor colorwithred:234.0/255 green:84.0/255 blue:87.0/255 alpha:1]. Cgcolor;
    Pathlayer.fillcolor = [Uicolor Whitecolor]. Cgcolor;
    Pathlayer.linewidth = 1.0f;
    Pathlayer.linejoin = Kcalinejoinmiter;

1 2 3 4 5 6 7 8 9 10 11 12 13-14

Add to the layer of the displayed view:

[Self.view.layer Addsublayer:pathlayer];

1

Another picture of layer (used as a key frame animation picture):

    UIImage *penimage = [uiimage imagenamed:@ "Quinn.png"];
    Calayer *penlayer = [Calayer layer];
    Penlayer.contents = (id) penimage.cgimage;
    Penlayer.anchorpoint = Cgpointzero;
    Penlayer.frame = CGRectMake (0.0f, 50.0f, PenImage.size.width, penImage.size.height);
    [Pathlayer Addsublayer:penlayer];

1 2 3 4 5 6

Add to the layer of the displayed view:

[Self.view.layer Addsublayer:penlayer];

1 2

When we get the path, there is no effect at this time, just drawing a picture and a few words on the screen, we need to let him move:

Set drawing animation

Duration represents animation time
fromvalue start State (0-1)
Tovalue End State (0-1)
addanimation Add path animation
speed speed
timeoffset time The
two properties of speed and time are related to duration and Fromvalue, Tovalue

    Cabasicanimation *pathanimation = [cabasicanimation animationwithkeypath:@ "Strokeend"];
    pathanimation.duration = 10.0;
    Pathanimation.fromvalue = [NSNumber numberwithfloat:0.0f];
    Pathanimation.tovalue = [NSNumber numberwithfloat:1.0f];
    [Self.pathlayer addanimation:pathanimation forkey:@ "Strokestart"];
    Pathanimation.speed = 0.1;
    Pathanimation.timeoffset = 0;

1 2 3 4 5 6 7

When Strokeend is changed to Strokestart

At this point the animation display mode for erasing animation, we can try to

1

Let the picture follow the path animation to move together:

Calculationmode: Can be understood as the frequency of animation, the effect of
kcaanimationlinear (linear)
kcaanimationpaced (uniform)
kcaanimationcubic (Smooth)
kcaanimationcubicpaced (even sleek)

delegate:
//-(void) Animationdidstop: (Caanimation *) Anim finished: (BOOL ) Flag;

    Cakeyframeanimation *penanimation = [cakeyframeanimation animationwithkeypath:@ "position"];
    penanimation.duration = 10.0;
    Penanimation.path = Self.pathLayer.path;
    Penanimation.calculationmode = kcaanimationpaced;
    Penanimation.delegate = self;
    [Self.penlayer addanimation:penanimation forkey:@ "position"];

1 2 3 4 5 6

Ways to get paths: The Getstringlayer method is as follows:

-(Uibezierpath *) Getstringlayer: (NSString *) str{//Create variable path cgmutablepathref letters = Cgpathcreatemutable ();
    Helveticaneue-ultralight//Set fonts Ctfontref font = ctfontcreatewithname (Cfstr ("Helvetica-bold"), 32.0f, NULL); Nsdictionary *attrs = [nsdictionary Dictionarywithobjectsandkeys: (__bridge id) font, Kctfonta
    Ttributename, nil];
                                                                     nsattributedstring *attrstring = [[Nsattributedstring alloc] Initwithstring:str
    ATTRIBUTES:ATTRS]; Create line Ctlineref by string = Ctlinecreatewithattrib
    Utedstring ((cfattributedstringref) attrstring);

    Gets each character as an array cfarrayref Runarray = Ctlinegetglyphruns (line); Traversal character array for (Cfindex runindex = 0; Runindex < Cfarraygetcount (Runarray); runindex++) {//Get FONT fo R this run ctrunref Run = (ctrunref) CFArraygetvalueatindex (Runarray, Runindex);

        Ctfontref Runfont = Cfdictionarygetvalue (Ctrungetattributes (run), kctfontattributename); For each GLYPH in run for (cfindex runglyphindex = 0; Runglyphindex < Ctrungetglyphcount (run); Runglyphindex + +) {//Get Glyph & glyph-data cfrange thisglyphrange = Cfrangemake (Runglyphindex, 1)
            ;
            Cgglyph Glyph;
            Cgpoint position;
            Ctrungetglyphs (Run, Thisglyphrange, &glyph);

            Ctrungetpositions (Run, Thisglyphrange, &position);
                Get PATH of outline {cgpathref letter = Ctfontcreatepathforglyph (Runfont, Glyph, NULL);
                Cgaffinetransform t = cgaffinetransformmaketranslation (position.x, POSITION.Y);
                Cgpathaddpath (Letters, &t, letter);
            Cgpathrelease (letter);
    }} cfrelease (line); Uibezierpath *path = [Uibezierpath bezierpATH];
    [Path Movetopoint:cgpointzero];
    [path Appendpath:[uibezierpath bezierpathwithcgpath:letters]];
    Cgpathrelease (Letters);
    Cfrelease (font);
return path;
 }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52

Original: http://blog.csdn.net/Xoxo_x/article/details/71512943
Reference Blog: http://blog.csdn.net/mydo/article/details/51620720