ios - Animating a CAShapeLayer / CAGradientLayer -
this addition question asked yesterday. result worked perfect, modification. using drawrect draw & animate 2 graphs. background graph, , foreground graph
the following code, based on thread above, produces cabasicanimation grows dark blue "triangle." instead of dark blue solid color, cagradientlayer 3 stops: red / green / blue.
i tried adding cagradientlayer configure gradient, used addsublayer add gradient cashapelayer animates out. result posting below not animate. color , shape remain static. gradient looks great, need animate out:
import uikit import quartzcore import xcplayground let view = uiview(frame: cgrect(x: 0, y: 0, width: 521, height: 40)) view.backgroundcolor = uicolor.whitecolor() xcplaygroundpage.currentpage.liveview = view let maskpath = uibezierpath() maskpath.movetopoint(cgpoint(x: 0, y: 30)) maskpath.addlinetopoint(cgpoint(x: 0, y: 25)) maskpath.addlinetopoint(cgpoint(x: 300, y: 10)) maskpath.addlinetopoint(cgpoint(x: 300, y: 30)) maskpath.closepath() let masklayer = cashapelayer() masklayer.path = maskpath.cgpath masklayer.fillcolor = uicolor.whitecolor().cgcolor let recttoanimatefrom = uibezierpath(rect: cgrect(x: 0, y: 0, width: 0, height: 40)) let recttoanimateto = uibezierpath(rect: cgrect(x: 0, y: 0, width: 97, height: 40)) let backgroundgray = cashapelayer() backgroundgray.path = maskpath.cgpath backgroundgray.fillcolor = uicolor.graycolor().cgcolor let foregroundgradient = cashapelayer() foregroundgradient.mask = masklayer foregroundgradient.backgroundcolor = uicolor.clearcolor().cgcolor let gradientlayer = cagradientlayer() gradientlayer.startpoint = cgpointmake(0, 0) gradientlayer.endpoint = cgpointmake(1, 0) gradientlayer.frame = maskpath.bounds let colors = [uicolor.redcolor().cgcolor, uicolor.greencolor().cgcolor, uicolor.bluecolor().cgcolor] gradientlayer.colors = colors foregroundgradient.addsublayer(gradientlayer) view.layer.addsublayer(backgroundgray) view.layer.addsublayer(foregroundgradient) let animation = cabasicanimation(keypath: "path") animation.fromvalue = recttoanimatefrom.cgpath animation.tovalue = recttoanimateto.cgpath animation.duration = 2 animation.removedoncompletion = false animation.fillmode = kcafillmodeforwards foregroundgradient.addanimation(animation, forkey: nil) i need foregroundgradient object (with gradientlayer sublayer!) animate left right.
if remove gradient code above, , keep foregroundgradient solid color, you'll see animating.
i think have use mask in view mention below.
//remove below line view.layer.addsublayer(backgroundgray) //add mask view view.layer.mask = backgroundgray the whole function looks this:
func getgradientview() { let view = uiview(frame: cgrect(x: 0, y: 50, width: 521, height: 40)) view.backgroundcolor = uicolor.graycolor() self.view.addsubview(view) let maskpath = uibezierpath() maskpath.movetopoint(cgpoint(x: 0, y: 30)) maskpath.addlinetopoint(cgpoint(x: 0, y: 25)) maskpath.addlinetopoint(cgpoint(x: 300, y: 10)) maskpath.addlinetopoint(cgpoint(x: 300, y: 30)) maskpath.closepath() let masklayer = cashapelayer() masklayer.path = maskpath.cgpath masklayer.fillcolor = uicolor.whitecolor().cgcolor let recttoanimatefrom = uibezierpath(rect: cgrect(x: 0, y: 0, width: 0, height: 40)) let recttoanimateto = uibezierpath(rect: cgrect(x: 0, y: 0, width: 300, height: 40)) let backgroundgray = cashapelayer() backgroundgray.path = maskpath.cgpath backgroundgray.fillcolor = uicolor.graycolor().cgcolor let foregroundgradient = cashapelayer() foregroundgradient.mask = masklayer foregroundgradient.backgroundcolor = uicolor.clearcolor().cgcolor let gradientlayer = cagradientlayer() gradientlayer.startpoint = cgpointmake(0, 0) gradientlayer.endpoint = cgpointmake(1, 0) gradientlayer.frame = maskpath.bounds let colors = [uicolor.redcolor().cgcolor, uicolor.greencolor().cgcolor, uicolor.bluecolor().cgcolor] gradientlayer.colors = colors foregroundgradient.addsublayer(gradientlayer) //remove below line //view.layer.addsublayer(backgroundgray) view.layer.addsublayer(foregroundgradient) //add mask view view.layer.mask = backgroundgray let animation = cabasicanimation(keypath: "path") animation.fromvalue = recttoanimatefrom.cgpath animation.tovalue = recttoanimateto.cgpath animation.duration = 1 animation.repeatcount = 1000 animation.removedoncompletion = false animation.fillmode = kcafillmodeforwards masklayer.addanimation(animation, forkey: "fill animation") } let me know if working per exceptions.
Comments
Post a Comment